React.js에서 JSX사용하기
JSX란? React에서 JSX는 필수 요소는 아니지만 React를 코딩하는데 많은 편리함을 더해주는 확장 문법이라고 보면 됩니다. JSX란? - React 공식웹사이트 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다. 공식 사이트에서는 위와 같이 작성되어 있지만.. 당췌 뭔 소린지... 쉽게 말하면 React.js에서 Virtual DOM을 만들 때 편하게 코딩하라고 HTML처럼 할 수 있게 해주는 템플릿 언어 비스무리한것이다라고 이해하면 될 것 같습니다. (이것도 어려운가? ㅠ) 이렇게 작성된 JSX를 babel로 컴파일을 하면 웹브라우저가 알아먹을 수 있는 javascript로 자동 변환이 됩니다. 예를 들면 아래와 같습니다. const name = "홍길동"; const element = <h1>Hello, {name}</h1>; ReactDOM.render(element, document.getElementById("root")); 이렇게 될 때... const element = <h1>Hello, {name}</h1>; 이 부분이 JSX 문법으로 작성된 것입니다. 이해가 되시나요?