[TIL] React 기초 다지기(1) - JSX

오늘 공부한것 & 기억하고 싶은 내용

JSX란?

• JavaScript를 확장한 문법이다.
• 기본적으로 React 요소를 만들 수 있게 해주는데, HTML에서 사용하는 문법과 흡사한 문법을 사용하기에 개발자들이 사용하기 편하다.
• 어플리케이션을 여러가지 작은 요소로 나누어 관리할 수 있게 해준다. (보기 쉽게 코드를 분리한 뒤에 함께 렌더링)
• 직접 만든 컴포넌트를 렌더링해서 다른곳에 사용할때는 꼭 대문자로 시작해야 한다.

Babel

• 브라우저는 JSX를 이해하지 못하기 때문에 바벨(Babel)을 이용해서 코드를 변환해줘야 한다.

• <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

• JSX를 감싸고 있는 script의 type을 바꿔준다.(<script type="text/babel">)

배운점 & 느낀점

React 기초 다지기 강의를 듣기 시작했다.

ReactJS 기초 영상편 강의였는데,
바닐라 자바스크립트로 먼저 코드를 짜고 그 뒤에 JSX로 바꿔보니 왜 이렇게 변했는지에 대한 원리를 알게 되는 좋은 시간이었다.

코드를 그냥 외우는게 아니라 이해하니까 좀 더 재밌는거 같기도 하고.....
다음시간부턴 진짜 React의 개념에 대해 공부할 예정이다. state.. 가즈아

참고: https://ko.legacy.reactjs.org/docs/introducing-jsx.html