결과를 먼저 말해보자면, React는 뭐랄까 조금 더 Component적이다. 사실 Vue를 먼저 배웠는데, Vue는 뭐랄까 구조적이였다. 흠 Component나 구조나 비슷비슷한 말일까?
Code의 비교를 통해, 알아보자. 저번 시리즈에서는 JavaScript 기반의 간단한 페이지를 구성하는 것을 목표로 했었다.
<!DOCTYPE html>
<html>
<body>
<span> Counter : 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++;
span.innerText = `Counter : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
투박하지만 고전적인 react의 방식으로 아래와 같이 변환할 수 있다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement("h3",
{
id:"title",
onMouseEnter: () => console.log("mouse enter"),
},
"Hello, I`m span" );
const btn = React.createElement(
"button",
{
onClick: () => console.log('im clicked'),
style: {backgroundColor : "tomato"},
},
"Click me"
);
const container = React.createElement("div", null, [h3,btn]);
ReactDOM.render(container, root);
</script>
</html>차이점으로 src를 활용하여 cdn을 활용하였고, 뭐랄까 뭔가뭔가 조금 더,, 쪼개졌다?? (생각해보면 나중에는 npm~ 어쩌고로 react를 설치할 것 이라고 예상한다. CDN도 옛날 방식 아닌가)
React.createElement() 를 활용했다.
React.createElement() 함수는 React Component를 생성한다.
이 함수의 첫 번째 인자는 태그 이름("h3", "button" 등), 두 번째 인자는 해당 태그의 속성 객체(예: { id: "title", onMouseEnter: ... }), 세 번째 인자는 자식 요소나 텍스트를 활용했다.
이후 여러 요소를 배열로 조합하여 하나의 Container에 요소들을 넣어버렸다! 이후 만들어진 요소들을 웹페이지 실제 DOM에 렌더링했다. 여기서는 container를 root div에 렌더링했다.
const container = React.createElement("div", null, [h3, btn]);
ReactDom.render(container, root)하지만 이 방법은 React를 사용하는 개발자들 중 어느 누구도 사용하지 않는 어려운 방법이라고 한다. 이제는 실제적으로 JSX를 사용한다고 한다. JSX에 대해 간단히 알아보고 아래 예시로 비교를 확인해보자.
JSX
: JavaScript XML의 약자로, HTML과 유사한 구문을 사용하여 React 요소를 생성하는 JavaScript의 구문 확장이다.
JSX는 React의 createElement 함수 호출로 변환된다. 이는 브라우저에서 직접 해석할 수 없기 때문에, Babel과 같은 컴파일러를 사용하여 일반 JavaScript 코드로 변환해야한다. (강의를 똑같이 따라쳤는데 계속해서 Console창에서 에러가 났는데 바벨로 변환했어야했다..)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello, I'm a title
</h3>
);
}
const Button = () => (
<button
style={{
backgroundColor:"tomato",
}}
onClick={()=>console.log("im clicked")}>
Click me
</button>
);
const Container = () => <div>
Component의 첫문자는 대문자로.
<Title/>
<Button/>
</div>
ReactDOM.render(<Container/>, root);
</script>
</html>이전 예시에서는 React.createElement를 사용하여 요소를 생성했지만, 이 예시에서는 JSX를 사용한다. 함수형 컴포넌트를 사용하여 UI를 구성하는 방법을 나타낸다.
그렇다. 더 Component적으로 변했다. 또한 이곳에서는 화살표함수를 사용하여 각 Const 변수를 함수로 변환했다. Button Component에서는 화살표 함수를 , Title에서는 기존의 고전적인 함수와 return의 방식을 택했다.
여기까지가 강의의 2챕터, 다음 강의에서는 뭐가 어떻게 되려나, 시간이 별로 없는 것만 같다. 급박하게 이해해 나가야 한다.
