Why React?
- 2021년 말 기준 상위 1만개 웹사이트 중 44.76%가 React JS 사용
- 페이스북의 막대한 투자와 지속적인 업데이트
- 프론트엔드 JS 라이브러리 중 가장 큰 JS 커뮤니티
Start React!
<!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>
<script></script>
</html>CRA 없이 React를 사용하려면 우선 index.html에서 React JS와 ReactDOM 코드를 import해준다
React JS는 element를 생성하고 이벤트 추가, ReactDOM은 element들을 HTML로 바꿔준다
<!DOCTYPE html>
<html>
<body>
<div id="root"></div> <!--여기에 ReactDOM이 element들을 랜더링-->
</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 btn = React.createElement(
"button",
{
id: "title",
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
const container = React.createElement("div", null, [btn]);
ReactDOM.render(container, root);
</script> <!--element들을 root에 랜더링-->
</html>- element는 createElement로 생성되며 ‘HTML 태그/props를 포함한 object/content’로 구성
- ReactDOM이 body의 id가 root인 비어있는 div에 생성된 element들을 랜더링한다
- addEventListener나 getElementById/querySelector 등 없이도 Interactive UI 구현
* createElement 역시 현재는 전혀 사용하지 않는 초기 방식이다!
JSX
createElement를 JSX로 대체할 수 있는데, 변환하기 위해서 Babel을 추가한다
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">상단의 코드를 아래와 같이 HTML과 유사한 JSX로 변환할 수 있다
<!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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
/*
const btn = React.createElement(
"button",
{
id: "title",
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
*/
const Button = () => (
<button
style={{
backgroundColor: "tomato",
}}
onClick={()=>console.log("im clicked")}
>
Click me
</button>
);
/*
const container = React.createElement("div", null, [btn]);
ReactDOM.render(container, root);
*/
const Container = () => <div>
<Button/>
</div>
ReactDOM.render(<Container/>, root);
</script>
</html>* 컴포넌트는 반드시 대문자로 시작!
arrow function 변환 (둘이 동일한 의미이다!)
const Button = () => (
<button
style={{
backgroundColor: "tomato",
}}
onClick={()=>console.log("im clicked")}
>
Click me
</button>
);
function Button() {
return(
<button
style={{
backgroundColor: "tomato",
}}
onClick={()=>console.log("im clicked")}
>
Click me
</button>
);
}
본 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기'를 바탕으로 작성되었습니다
'Front-end > React' 카테고리의 다른 글
| [노마드코더] #3 CRA, Effects (2) | 2021.11.17 |
|---|---|
| [노마드코더] #2 State & Props (2) | 2021.11.16 |
| [TIL] styled-components 드롭 다운 메뉴 만들기 (4) | 2021.09.18 |
| [코딩애플] #6 useContext, Tab UI, Animation (2) | 2021.08.20 |
| [코딩애플] #5 GitHub Pages로 React 배포 (0) | 2021.08.18 |