[React] JSX란 무엇인가?

 

JSX란

자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다.
이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 

function App(){
        return(
            <div>
                Hello <b>react</b>
            </div>
        );
      }

이렇게 작성된 코드를 아래와 같이 변경해줍니다.

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

 

JSX의 장점

1. 보기 쉽고 익숙합니다.

2. 더욱 높은 활용도가 생긴다.

 

JSX를 사용할때는 지켜야할 몇가지 규칙이 있습니다.

 

1. 만들고자 하는 컴포너트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다. 

※ 만일 div를 표시하고 싶지 않는 경우에는 아래와 같이 사용하여 표시하지 않게끔 할 수 있습니다. ( 리액스 v16이상부터는 Fragment를 불러와 <> </>만으로도 사용할 수 있도록 변경되었습니다.

<React.Fragment>

</React.Fragment>

 

2. JSX 내부에서 코드를 { }로 감싸준다면 자바스크립스 표현식을 쓸 수 있습니다.

 

3. IF 문 대신 조건부 연산자를 사용해야 합니다.

※ JSX 내부의 자바스크립트 표현식에서는 if 문을 사용할 수 없습니다. 대신 조건에 따라 다른 내용을 렌더링해야 할 떄는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하면 됩니다.

 

4. undefined를 렌더링 하지 않기

 

5. 인라인 스타일을 적용할 떄는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다. 예를 들어 background-color -> backgroundColor로 카멜 표기법으로 작성해야 합니다.

 

6. class 대신 className으로 설정해 주어야 합니다.

 

7. 태그는 꼭 닫아주세요. 예를 들어 HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 하는데 <input>이라고 적고 사용했습니다 해당 태그를 JSX내에서는 <input> </input>으로 입력해야 정상적으로 작동합니다. 

 

8. 주석을 사용할때는 {/* 내용 */} 으로 작성해야 합니다.