[React] #01 JSX 문법이란?

React의 JSX에 대해서 정리해보았다 JSX는 React 공식 홈페이지에서는 아래와 같이 설명하고 있다. JSX는 JavaScript 새로운 문법이라고 생각하는게 심플하다 기본적으로 "Component" 를 담고 있다 

파일 확장자가 *.JSX지만 *.JS그대로 사용하기도 한다.

 

기본적인 문법으로는 변수안에 HTML 코드를 넣어보자

const element = <h1>Hello, world!</h1>;

 

이제 위의 문법을 render()를 통해서 DOM Node에 추가한다 브라우저는 JSX를 모른다 JavaScript를 구문으로 React에서 트랜스파일하여 보여준다고 한다

const element = <h1>Hello React</h1>;

ReactDOM.render( element, document.getElementById('root') );

 

위와 같이 써주면 DOM에 해당 HTML이 삽입된다. 또는, 아래와 같이 사용할 수 도 있다.

const name = 'Frontend';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render( element, document.getElementById('root') );

그러면 DOM에는 Hello, Frontend 가 추가되어 브라우저의 표시가 된다. 개발자도구로 확인하면 <h1 /> 엘리먼트도 같이 추가된 것을 확인할 수 있다. 위의 HTML 구문을 같이 JavaScript와 같이 사용할 수 있는것이 JSX라고 생각한다.

아래의 객체의 키값을 찾아서 값을 넣어줄 수도 있다.

const info = {
    name: 'butter',
    game: 'overwatch'
}

const JsxRenderView = <div>{info.name}</div>;

ReactDOM.render( JsxRenderView, document.getElementById('root') );

Template literals 과 굉장히 비슷하다. 조건문 있다고 가정을 해보자

const info = {
    name: 'butter',
    game: 'overwatch'
}

if ( true ) {
  info.name = 'human'
}

const JsxRenderView = <div>{info.name}</div>;

ReactDOM.render( JsxRenderView, document.getElementById('root') );

true일 경우 info.name값을 변경을 하는 간단한 조건문이다. 그러면 결과값은 'human'이 웹상에 나타난다. 가장 대표적인 Array 형태의 데이터를 매핑해보겠다. 아래의 코드를 보자

const array = ['over', 'watch', 'gold']

const MappingArrayDataView = ({user}) =>{
  return(
    <ul>
      { user.map((v,i) => {
          return(
            <li key={i}>{v}</li>
          )
        })
      }
    </ul>
  )
}

ReactDOM.render( 
  <MappingArrayDataView user={array} />,
  document.getElementById('app')
);

함수형 컴포넌트로 array 데이터를 Web상에 나타나게 하는 코드이다. JSX는 Array 형태를 map를 loop를 돌려 해당 데이터를 차례대로 보여줄수 있다. 간단하게 JSX와 삽입되는 내용을 어떻게 반영되는지에 대해서 알아보았다

Component에서 더 많이 사용하게 될것이다.