[React] 3. 리액트 JSX

3. React JSX

JSX 는 JavaScript 의 확정 문법으로 XML 과 유사하게 생겼습니다.

이런 형식으로 작성된 코드는 Browser 에서 실행되기 전 코드가 번들링(Bundlering, 파일을 묶듯이 연결)되는 과정과정에서 바벨을 사용하여

일반 JavaScript 코드로 변환됩니다.

1 2 3 4 5 6 7 function App() { return ( < div > Hello < b > react < / b > < / div > ); } cs

위 코드는 아래와 같이 변환됩니다.

1 2 3 function App() { return React.createElement( "div" , null , "Hello " React.createElement( "b" , null , "react" )); }

cs

JSX 를 사용하면 간편하게 UI 를 렌더링할 수 있습니다.

3.1 JSX 의 장점

(1) 보기 쉽고 익숙함

가독성이 높고 작성하기에 쉽습니다. HTML 과 작성하는 것이 비슷하기 때문입니다.

(2) 높은 활용도

3.2 JSX 문법

3.2.1 감싸진 요소

컴포넌트에 여러 요소가 있으면 반드시 부모 요소 하나로 감싸야 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 import React from 'react' ; function App() { return ( < > < h1 > 리액트 하이 ! < / h1 > < h2 > 나의 첫 공부 start ! < / h2 > < / > ); } export default App; cs

<> 에 Fragment 를 생락하고 작성해도 잘 돌아갑니다! 아주 간편하죠? :)

3.2.2 JavaScript 표현

JSX 안에서 JavaScript 표현식을 사용할 수도 있습니다!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 import React from 'react' ; function App() { var name = '리액트!' ; return ( < > < h1 > { name } 하이 ! < / h1 > < h2 > 나의 첫 공부 start ! < / h2 > < / > ); } export default App; cs

3.2.3 IF 문 대신 조건부 연산자 사용

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React from 'react' ; function App() { const name = '리액트!' ; return ( < div > { name = = = '리액트!' ? ( < h1 > 리액트다 ! < / h1 > ) : ( < h2 > 리액트가 아니다 ! < / h2 > )} < / div > ); } export default App; cs 위와 같이 삼항 연산자를 활용합니다.

from http://rypro.tistory.com/136 by ccl(A) rewrite - 2020-03-06 17:20:40