본문 바로가기

jsx2

JSX와 React Virtual DOM 지난번 글에서 JSX가 HTML로 보이지만 사실은 javascript 코드라고 했습니다. 그리고 ReactDOM.render 함수가 첫 번째 파라미터로 넘어온 JSX를 HTML로 바꾸어 두 번째로 넘어온 HTML element에 넣어준다고 했습니다. 그럼 JSX가 왜 HTML이 아닌 javascript인지 살펴보겠습니다. JSX 먼저, 다음과 같은 JSX 코드가 있습니다. What is JSX JSX is ... React는 Babel이라는 도구를 통해 JSX를 다음과 같이 바꿔줍니다. 원래는 Babel 설정을 따로 해줘야 하지만 create-react-app으로 React 프로젝트를 만들면 Babel 설정을 할 따로 할 필요없이 그냥 사용할 수 있습니다. 여기에 가면 온라인으로 바벨을 사용해 볼 수 있.. 2020. 12. 6.
React 시작하기 지난번 글에서 React가 뭔지에 대해서 적었으니 이번에는 React 개발환경을 어떻게 세팅하고 시작하는지에 대해 적어보려고 합니다. create-react-app React를 사용하려면 웹팩, 바벨 등의 설정을 해야합니다.(웹팩, 바벨이 뭔지 지금은 몰라도 됩니다.) React만 공부하기도 힘든데 웹팩, 바벨에 대해서도 공부하고 설정까지 다 직접 해야한다면 React를 시작하기도 전에 이미 지쳐버려서 공부하기를 포기해버릴지도 모릅니다. 다행히 페이스북에서 만들어준 create-react-app 을 통해 쉽게 React 프로젝트를 만들 수 있습니다. create-react-app을 사용하는 방법은 두 가지가 있습니다. npm에서 create-react-app을 global로 설치하고 실행하기 npx로 설.. 2020. 8. 8.