728x90
1. 소개
- react가 왜 만들어졌는지, 어떤 문제를 해결할려고 생겼는지 알아함
- 생 JS랑 비교해서 어떤 장점이 있는지 비교하면서 왜 필요한지 알게 됨
- react는 좋은 지름길을 만들어 놓은 것.
- 물론 따라야하는 규칙이 많이 존재하기는 함
1.1. React import
- 3가지 import
- react file import
- react dom import
- babel import
- 작성 위치
body tag 밑에 작성
- <body> </body>
<script src="~~~">
- <body> </body>
- 코드
<!DOCTYPE html>
<html>
<head></head>
<body></body>
<!-- body 끝 -->
<!-- js에 react를 넣기 위해 2가지 js code가 필요하다 react, react-dom-->
<!--react : react에 관한 코드가 txt형태로 나타남-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--react-dom : text code를 dom 형식으로 변경-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--babel : jsx 문법을 old one으로 변경-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel"></script>
</html>- console 창 react 적용됨을 확인
2. old react 방식
- JS로 counter 만들기
<!DOCTYPE html>
<html>
<body>
<span>Total click: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter += 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>2.1. 오래된 방식 React - createElement(), ReactDOM.render()
- React의 핵심 : 모든 것이 JS로 시작해서 HTML로 뿌려주는 방식 = react가 html를 update를 컨트롤 할 수 있음을 시사
<!DOCTYPE html>
<html>
<body>
<div id="root"></div> <!--render시 2nd params로 사용-->
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span", {id : "sexy-span", style:{color:"red"}}, "hello, i am span content!"
);
ReactDOM.render(span, root);
</script>
</html>
- 문법
- ReactDOM.render(react_element, html내에 존재하는 tag)
- 1st params: createElement()를 담은 변수명
- 2nd params: 해당 html의 tag의 변수명. createElement를 담을 공간
- createElement()
- 1st params : tag 명
- 2nd params : 1st Tag의 property
- 3rd params : html form에 보이는 실제 글자(contents)
- ReactDOM.render(react_element, html내에 존재하는 tag)
3. old react 방식 - event , vanilla JS 비교
<!DOCTYPE html>
<html>
<body>
<div id="root"></div> <!--render시 2nd params로 사용-->
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
// {id : "sexy-span", style:{color:"red"}},
null,
"hello, i am span content!"
);
// 변수명이 tag와 동일할 필요 없다.
const btn = React.createElement("button", null, "Click me - content")
// 2가지 createElement 요소 다 넣는 방법
const container = React.createElement("div", null, [h3, btn]) // 배열로 위의 2개 변수 넣음
ReactDOM.render(container, root);
</script>
</html>
- event 주기
- 참고로 property를 넣는 칸({})에는 ,를 통해서 event, id, class, style 등등 한번에 다 넣을 수 있다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div> <!--render시 2nd params로 사용-->
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement( "h3", null, "hello, i am span content!" );
const btn = React.createElement("button", {
// property에 event가 존재. addEventListener, innerText같은 걸 다 생략하게 할수 있다.
onClick: () => console.log("mouse enter"),
},
"Click me - content");
const container = React.createElement("div", null, [h3, btn]) // 배열로 위의 2개 변수 넣음
ReactDOM.render(container, root);
</script>
</html>
4. JSX - 1. createElement 바꾸기
- JavaScript를 확장한 문법
- createElement같은걸 html과 유사한 문법으로 변경해서 쉽게 코드를 작성하도록 하는 것
- babel : jsx 문법을 old JS 문법으로 변경 : 이래야지 browser가 읽을 수 있게 된다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> - react 는 변수명을 작성할 때 첫글자를 대문자로 작성 -> component를 내부에 넣을 때 대문자로 해야지 실제 html tag와 구분이 된다
- Title
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--babel : jsx 문법을 old JS 문법으로 변경 : 이래야지 browser가 읽을 수 있게 된다.-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// const Title = React.createElement(
// "h3",
// {
// id: "title",
// onMouseEnter: ()=> console.log("mouse enter")
// },
// "hello, i am span content!"
// );
// createElement 대시 jsx 사용한 code
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
"hello, i am span content!"
</h3>
);
...
</script>
</html>
- button
<!DOCTYPE html>
<html>
<body>
<div id="root"></div> <!--render시 2nd params로 사용-->
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--babel : jsx 문법을 old JS 문법으로 변경 : 이래야지 browser가 읽을 수 있게 된다.-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
...
const Button = ()=>(
<button style={
backgroundColor:"blue",
}
onClick={()=>console.log("mouse enter")}
>
Click me - content
</button>
);
//const btn = React.createElement("button", {
// property에 event가 존재. addEventListener, innerText같은 걸 다 생략하게 할수 있다.
// onClick: () => console.log("mouse enter"),
//},
//"Click me - content");
...
</script>
</html>
5. JSX - 2. render 바꾸기
- 먼저 특징을 가진 함수를 function으로 변경한 후 작성하기
- 내가 만든 function 하나하나가 component이다.
- component를 재사용시, <ComponentName/>으로 작성한다. -> 이렇기 때문에 html tag와 헷갈리지 않도록 대문자를 사용한다.
- component 생성 방법 2가지
- function Title() { return () } ;
- const Title = () => () ;
- 참고
- () => () // 반환 값이 존재하지 않는 경우 사용
- () => {return} // 반환 값이 존재하는 경우 사용
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// component1
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
"hello guys"
</h3>
);
// component2
const Button = () => (
<button onClick={() => console.log("clicked")} style={{ color: "red" }}>
click
</button>
);
// element 넣을 때 img 넣듯이 넣음
const Container = () => (
<div>
<Title /> // component를 다른 component에 넣는 jsx 방법
<Button /> // component를 다른 component에 넣는 jsx 방법
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
