[리액트]JSX 문법

1. 감싸인 요소

- 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함. 왜냐하면, virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 궂로 이루어져야 한다는 규칙이 있기 때문임.

 

- 아래 예시에서 부모 요소에 의해 감싸여 있지 않기 때문에 오류 발생.

function App() {
  return (
<div>안녕1</div>

<div>안녕2</div>
  );
}

 

- 아래와 같이 수정하면 됨.

function App() {
  return (

<div>
<div>안녕1</div>

<div>안녕2</div>

</div>
  );
}

 

- div대신 Fragment로 감싸기(import해주기). Fragment 대신 <></>로도 쓸 수 있음. 

function App() {
  return (

<Fragment>            //<>
<div>안녕1</div>

<div>안녕2</div>

</Fragment>           //</>
  );
}

 

2. 자바스크립트 표현

- JSX 안에서는 자바스크립트 표현식을 쓸 수 있음.

 

- 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { } 로 감싸면 됨.

 

- 예시)

function App() {

 const name = '코딩'; 
  return (

<>
<div> {name}안녕1</div>       //코딩안녕1

<div>안녕2</div>                   //안녕2

</>
  );
}

 

3. if문 대신 조건부 연산자

- JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없음.

 

- 대신에 { } 안에 조건부 연산자를 사용하거나, JSX 밖에서 if문을 사용하여 사전에 값을 설정하면 됨.

function App() {

  const name = '코딩'; 
  return (

   <div>

    {name === '코딩'   ?   (<h1>코딩입니다.</h1>)   :   (<h2>코딩이 아닙니다.</h2>)   } //결과 : 코딩입니다.

   <div/>
  );
}

 

4. AND 연산자(&&)를 사용한 조건부 렌더링

- 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 상황에서 조건부 연산자 사용하기.

 

- 예시1)

function App() {

  const name = '코'; 
  return <div> {name === '코딩' ? <h1>코딩입니다.</h1> : null} </div>;

 

- 예시2)

function App() {

  const name = '코'; 
  return <div> {name === '코딩' && <h1>코딩입니다.</h1>} </div>;

 

- 두 예시 모두 브라우저 상에서 아무것도 나타나지 않음. && 연산자로 조건부 렌더링을 할 수 있는 이유는, 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문. 

 

- 단, falsy한 값인 0은 예외적으로 화면에 나타남.

 

 

 

 

 

*출처 : 리액트를 다루는 기술*