TIL 17 | [React] 조건부 렌더링

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

조건부 렌더링

밑에 코드를 보며 설명을 하겠습니다.

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

export default App;

true 는 자바스크립트 값이기 때문에 중괄호로 감싸주었습니다. 그리고, Hello 컴포넌트에서는 isSpecial이 true 이냐 false 이냐에 따라서 컴포넌트 좌측에 no 표시를 보여주겠습니다..

조건부 렌더링에서는 주로 삼항연산자를 사용합니다.

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

export default Hello;

isSpecial 값이 true 라면 no를 그렇지 않나면 null 을 보여주도록 했습니다. 참고로 JSX 에서 null를 렌더링 하게 된다면 아무것도 나타나지 않게 됩니다.

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

지금은 내용이 달라지는게 아니라, 단순히 특정 조건이 true 이면 보여주고, 그렇지 않다면 숨겨주고 있는데요, 이러한 상황에서는 && 연산자를 사용해서 처리하는 것이 더 간편합니다.

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

export default Hello;

isSpecial && no 의 결과는 isSpecial 이 false 일땐 false 이고, isSpecial이 true 일 땐 no 가 됩니다. 이게 왜 그렇게 되는지 모르겠다면 단축 평가 논리 계산법 을 배워보세요.

단축 평가 논리 계산법
https://learnjs.vlpt.us/useful/03-short-circuiting.html

props 값 설정을 생략하면 ?

컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략한다면, 이를 true로 설정한 것으로 간주합니다.

출처

https://reactjs-kr.firebaseapp.com/docs/conditional-rendering.html