[React 기초] JSX

1. JSX 란 무엇인가?

JSX 를 알기전 React 에 관한 기본 지식이 있어야 하는데, React는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 입니다.

하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크 입니다.

 

//잘못된 예시

const element = (
  <fragment>
    <h1>Hello, react!</h1>
    <h1>Hello, react!</h1>
 </fragment>
  
);
ReactDOM.render(element, document.getElementById("root"));

 

JSX 는 JavaScript 의 확장 문법인데, DOM 엘리먼트들을 만들 때 JavaScript 형식으로 작성해야 하는 것을, XML 과 비슷한 형태로 작성할 수 있게 해줍니다.  공식적인 문법은 아니기 때문에, 코드가 올바르게 표시되도록 하기 위하여 바벨(Babel) 언어 설정을 사용하는 것을 권장합니다.

 

 

2. Fragment

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.

//잘못된 예시

const element = (
  
    <h1>Hello, react!</h1>
    <h1>Hello, react!</h1>
  
);
ReactDOM.render(element, document.getElementById("root"));

상위의 코드를 실행하게되면,

이런 오류가 표출되게 된다!!!!!!!!!!!!!!

그렇기 때문에 리액트는 <fragment></fragment> 또는, <></>로 묶어줘야 정상적으로 작동하게 된다 <div></div>로 묶는 방법도 있지만, <div> 태그로 묶게된다면 <div></div> 안에 묶인 <h1> 태그가 2개 생성되지만,  fragment로 묶어준다면!!!!

 

 

깔끔하게 <h1>태그 두개만 표출되게 된다.