React - (5) 조건부 렌더링

조건부 렌더링

Javascript의 조건 처리처럼 컴포넌트의 렌더링 결과를 조건부로 결정할 수 있다.

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.
출처 : 공식문서

삼항연산자 이용

삼항연산자는 조건에 따라 보여줘야 하는 결과가 다를 때 사용한다.

// App.js
function App() {
  return (
    <div>
      {/* 두 컴포넌트에 isActive 라는 props를 각각 true/false 로 전달한다. */}
      <Hello isActive={true} />
      <Hello isActive={false} />
    </div>
  );
}

// Hello.js
const Hello = ({ isActive }) => {
  return (
    <div>
      <h1>
        {/* isActive 값에 따라 렌더링 결과가 달라진다 */}
        isActive?
        {isActive ? " Yes" : " No"}
      </h1>
    </div>
  )
}

값이 true 일때에만 결과를 보여주고 싶을 때에는 AND 연산자(&&) 를 이용하는게 더 편한다.

AND 연산자 이용

단축 평가 논리 계산법에 의해 렌더링 결과가 정해진다.

function App() {
  return (
    <div>
      <Hello isRed={true} />
      <Hello isRed={false} />
    </div>
  );
}

// Hello.js
const Hello = ({ isRed }) => {
  return (
    <div>
      {/* isRed 의 값이 true 일 때만 color 속성에 red 가 적용된다.  */}
      <h1 style={{ color: isRed && "red" }}>
        isRed?
      </h1>
    </div >
  )
}

단축 평가 논리 계산법에 의해 isRed가 true 일 때에만 "red"가 결과로 나온다.
isRed가 false 일 때에는 결과는 null이 된다.

if문 사용

if문을 사용하기 위해서는 즉시실행함수 를 이용해야한다.
다만, 문법이 까다로우니 권장하지 않는 방법이다.

// App.js
function App() {
  return (
    <div>
      <Hello isActive={true} />
      <Hello isActive={false} />
    </div>
  );
}

// Hello.js
const Hello = ({ isActive }) => {
  return (
    <div>
      <h1>
        isActive?
        {
          (() => {
            if (isActive === true) return (<span>Yes</span>);
            else if (isActive === false) return (<span>No</span>);
          })()
        }
      </h1>
    </div>
  )
}

props 를 value 없이 전달할 때

props 를 value 없이 key 만 전달하면 자동으로 true 가 할당된다.

// App.js
function App() {
  return (
    <div>
      <Hello isActive />
      <Hello isActive={true} />

    </div>
  );
}

// Hello.js
const Hello = ({ isActive }) => {
  return (
    <div>
      <h1>
        isActive?
        {isActive ? " Yes" : " No"}
      </h1>
    </div>
  )
}