1. JSX로 createElement를 대체하는 방법(개발자들이 좀 더 편리한 도구를 사용하기 위해서)
- JSX : JavaScript를 확장한 문법
기본적으로 우리가 이 코드에서 만든 것처럼 React 요소를 만들 수 있게 해주는데,
(우리가 HTML에서 사용한 문법과 흡사한 문법을 사용해서..!)
생긴게 HTML이랑 비슷해서, JSX로 React 요소를 만드는게 개발자들의 입장에서는 굉장히 편하다.
JSX는 어플리케이션을 여러 가지 작은 요소로 나눠서 관리할 수 있게 해준다.
우선, JSX를 사용하려면 Babel을 설치해줘야 한다.
왜냐하면, Babel은 코드를 변환하는 플러그인인데,
이 Babel이 없이는 html에서 JSX 문법을 이해할 수 없기 때문이다.
React JS와 React DOM을 import 했을 때와 마찬가지로,
unpkg.com 에 들어가서 babel 소스를 복사해서 script 쿼리에 붙여넣기 해준다.
그 다음, JSX 방식으로 React.createElement 없이 똑같이 코드를 구현해준다.
하단의 내용은 지난 번 코드와 동일한 코드이다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.7.0/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 Title = (
<h3 id="title" onMouseEnter={() => console.log('mounse enter')}>
Hello I'm a title
</h3>
);
const Button = (
<button
style={{ backgroundColor: "tomato"}}
onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);//render의 의미 : 사용자에게 보여준다.
</script>
</html>
이번에는 React.createElement도 없애고 JSX 방식으로 코드를 구현해보겠다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.7.0/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");
//arrow function == function
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log('mounse enter')}>
Hello I'm a title
</h3>
);
//function == arrow function
function Button() {
return (
<button
style={{ backgroundColor: "tomato"}}
onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
}
const Container = () => (
<div>
<Title/>
<Button/>
</div>
);
ReactDOM.render(<Container/>, root);//render의 의미 : 사용자에게 보여준다.
</script>
</html>이런식으로 기존의 상수를 function으로 바꿔서
하단의 Container 상수에 HTML 형식으로 div 쿼리 안에 넣어서
함수로 바꾼 부분 역시 쿼리화 시켜서 넣어주면 된다.
함수를 쿼리화 시키는 것을 '컴포넌트' 라고 하며, 컴포넌트는 반드시 맨 앞글자가 대문자여야 한다.
이전에 React 만 썼던 것 보다 더 코드가 간결해지는 것을 확인할 수 있다.
React 라이브러리는 바벨도 함께 설치가 되어서 JSX 방식이 합쳐져서
개발자들이 보다 훨씬 간편하게 프론트엔드 코드를 구현할 수 있다.
'개발 > React' 카테고리의 다른 글
| 3.4 State Functions (0) | 2023.06.10 |
|---|---|
| 3.0 Understanding State (0) | 2023.06.09 |
| [복습] 2.0 Introduction (0) | 2023.06.04 |
| 21.08.24 개발일지 (0) | 2023.05.24 |
| 21.08.23 오늘 개발 진행한 내용 (0) | 2023.05.24 |
