728x90
반응형
JSX를 모르고 리액트를 이해할 수는 없다.
리액트 공식문서에서도 맨 먼저 소개되는 개념이 JSX일 정도로 중요하다.
공식문서를 보는 것도 추천하기 때문에 아래 링크를 참고하시길.
https://ko.reactjs.org/docs/introducing-jsx.html
JSX 소개 – React
A JavaScript library for building user interfaces
ko.reactjs.org
<body>
<span>클릭수 : 0</span>
<button id="btn">클릭!</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn")
const span = document.querySelector("span")
function handleClick() {
counter += 1;
span.innerText = `클릭수 : ${counter}`;
}
button.addEventListener("click", handleClick)
</script>순수 JS에서는 body에 HTML을 만들어준 다음 <script>에서 기능이 동작하게 해줬다.
하지만 기능이 동작하게 하기 위해서는 document.getElementById라든지 document.querySelector라든지 HTML을 가지고 와야했다.
이 비효율적인 방식을 바꿔주는 것이 JSX이다❗️
const Container = () => (
<div>
<h3>클릭수 : 0</h3>
<button>클릭</button>
</div>
);JSX는 변수에 HTML을 담고 언제든지 몇 번이고 재사용이 가능하게 해준다.
위 코드를 보면 Container라는 변수에 div가 있고 그 안에 h3와 button이 있다.
변수에 넣어줬기 때문에 Container를 몇 번이고 호출하여 생성해줄 수 있는 것이다 👍🏻
결론은 JSX 덕분에 HTML을 변수에 담아서 재사용이 가능하구나라고 생각해주면 된다.
728x90
반응형
'Front Side > Library > React' 카테고리의 다른 글
| [React] 회원가입과 로그인 서비스 구현 중 컴포넌트 재사용 (1) (0) | 2022.10.08 |
|---|---|
| [React] useState() 바로 반영 안되는 현상 해결 (0) | 2022.09.21 |
| [React] useEffect 두 번 호출?! with.StrictMode (0) | 2022.08.21 |
| [React] 리액트 이해하고 사용하기 (3) useEffect (0) | 2022.08.16 |
| [React] 리액트 이해하고 사용하기 (2) useState() 이용해서 리렌더링 하기 (0) | 2022.07.30 |
댓글