[React] 기초 정리 - 조건부 렌더링

 

조건부 렌더링이란?

✅ 특정 조건에 따라 다른 결과물을 렌더링 하는 것

 

 

Hello 컴포넌트를 통해 실습

✅ isSpecial이라는 props를 받도록 구현

✅ isSpecialdl true면 '특별한' 이라는 글자가 노출되고 false면 비노출되게 처리

 

cf) JSX에서 null, false, undefined 값을 렌더링하게 되면 아무것도 나타나지 않게 된다.

 

삼항연산자를 사용한 방법

✅ 삼항연산자는 주로 특정 조건에 따라 보여줘야하는 내용이 다를 때 사용한다.

// Hello.js

export default function Hello({ isSpecial }) {
  return (
    <div>
      {isSpecial ? <b> 특별한 </b> : null}
      Hello!!!!!!!
    </div>
  );
}

 

&&연산자를 사용한 방법

✅ 이처럼 내용이 달라지지 않고 특정 조건이 true이면 노출하고 그렇지 않으면 비노출하는 경우엔 해당 방법이 더 간편하다.

// && 연산자를 사용하여 처리한 방법

export default function Hello({ isSpecial }) {
  return (
    <div>
      {/* {isSpecial ? <b> 특별한 </b> : null} */}
      {isSpecial && <b> 특별한 </b>}
      Hello!!!!!!!
    </div>
  );
}

 

Hello 컴포넌트 사용하기

// App.js

import Hello from "./Hello";

export default function App() {
  return (
    <div>
      <Hello isSpecial={true} />
      <Hello isSpecial />
      <Hello />
    </div>
  );
}

✅ props 값을 설정할 때 이름만 작성하고 값 설정을 생략한다면 true로 설정한 것으로 간주된다.

→ isSpecial은 isSpecial={true} 과 같은 의미

 

 

실행 화면 

 

 

 

---

Reference

 

벨로퍼트님의 모던리액트 강의 문서를 보고 작성하였습니다.

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

6. 조건부 렌더링 · GitBook