TIL: 조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다.

예로 App 컴포넌트에서 Hello 라는 컴포넌트를 사용 할 때, isSpecial 이라는 props를 설정해보자.

 

App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
	return (
    	<Wrapper>
    	  <Hello name="react" color="red" isSpecial={true}/>
          <Hello color="pink" />
        </Wrapper>
    )
}

export default App;

여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸주었다.

그리고, Hello 컴포넌트는 isSpecial이 true 이냐, false이냐에 따라서 컴포넌트의 좌측에 *표시를 보여줄것이다.

이를 처리하는 가장 기본적인 방법은, 삼항연산자를 사용하는 것이다.

 

Hello.js

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

isSpecial 값이 true면 <b>*</b>를, 아니라면 null을 보여주도록 했다. JSX에서 null, false, undefined를 렌더링하게 되면 아무것도 나타나지 않는다.

보통 삼항연산자를 사용해 조건부 렌더링을 하는 경우는 특정 조건에 따라 보여줘야 하는 내용이 다를 때이다.

지금은 내용이 달라지는 게 아니라, 단순히 특정 조건이 true이면 보여주고, 아니면 숨겨주고 있는데 이 때는 &&연산자를 사용해 처리하는 것이 더 간편함.

 

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

isSpecial && <b>*</b> 의 결과는 isSpecia 이 false일땐 false이고, isSpecial이 true일땐 <b>*</b>가 된다.

 

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial />
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

이렇게 isSpecial 이름을 넣어주면 isSpecial={true} 와 동일한 의미이다.

 

 

 

Reference

https://react.vlpt.us/basic/06-conditional-rendering.html

6. 조건부 렌더링 · GitBook