React(리액트): 조건부 렌더링

조건부 렌더링이란, 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 의미한다. 

 

App.js

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

App 컴포넌트의 4번 줄에서 Hello 컴포넌트에게 isSpecial을 넘겨준다. 

* isSpecial={true}를 그냥 isSpecial로 바꾸어도 결과는 동일하다. 

 

Hello.js

import React from "react";

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

Hello.defaultProps = {
  name: "이름없음",
};

export default Hello;

11번줄에서 삼항 연산자를 사용해 isSpecial이 True이면 *이 표시되도록 했고, 아닐 경우 아무것도 표시되지 않도록 했다.

참고로 null, false, undefined를 렌더링 할 경우는 화면에 아무것도 표시되지 않는다.

 

위와 같은 상황의 경우에서는 삼항 연사자보다는 && 연산자를 사용하는 것이 더 편리하다.

 

{isSpecial ? <b>*</b> : null} => {isSpecial && <b>*</b>}

이런 식으로 바꾸면 결괏값이 false일 경우 화면에 표시되지 않기 때문에 결과는 똑같다.

 

단순히 True, False에 따라 숨기고 보여주고 할 때에는 AND연산자(&&)를 사용하면 되고 

만약 내용이 바뀌어야 하는 경우는 삼항 연산자를 사용하면 된다.

 

<b>{isSpecial ? "스페셜하다" : "스페셜하지않다."}</b>

이 코드처럼 True, False에 따라 보여줘야 하는 값이 다를 때는 삼항 연산자를 사용하는 것이 적절하다. 

 

최종 결과는 다음과 같다. App.js를 보면 두 번째 Hello 컴포넌트에 props로 color="pink"만 넘겨주기 때문에

다음과 같은 결과가 나온다.