[ React ] 조건부 렌더링

 

컴포넌트를 조건부 렌더링하는 부분에 대하여 정리합니다.

코드가 간단하여 굳이 이렇게 안쓰고 더 짧게 쓰는 방법이 있으나

함수형 컴포넌트 작성시 복잡하게 사용할 경우도 있을듯 하여 아래처럼 정리합니다.

 

1. if문을 사용한 조건부 렌더링

const IsRight = () => {
  return <button>맞습니다.</button>;
};

const IsWrong = () => {
  return <button>틀립니다.</button>;
};


function Parent() {
const Month = 2;
  return (
    <div className="App">
      <div>지금은 2월입니까?</div>
      <Child month={Month} />
    </div>
  );
}

function Child({ month }) {
  if (month === 2) {
    return <IsRight />;
  } else return <IsWrong />;
}

 

 

 

2. 인라인 구문 > 삼항 연산자를 사용한 렌더링

const IsRight = () => {
  return <button>맞습니다.</button>;
};

const IsWrong = () => {
  return <button>틀립니다.</button>;
};

function App() {
  const Month = 2;
  return (
    <div className="App">
      <div>지금은 2월입니까?</div>
      { Month === 2 ? <IsRight /> : <IsWrong /> }
    </div>
  );
}

 

3. 인라인 구문 > &&연산자를 사용한 렌더링

const IsRight = () => {
  return <button>맞습니다.</button>;
};

const IsWrong = () => {
  return <button>틀립니다.</button>;
};

function App() {
  const Month = 2;
  return (
    <div className="App">
      <div>지금은 2월입니까?</div>
      { Month === 2 && <IsRight /> }
    </div>
  );
}

 

 

사실 길지않은 코드기 때문에 아래처럼 사용하는것이 제일 간단하다.

function App() {
  const Month = 2;
  return (
    <div className="App">
      <div>지금은 2월입니까?</div>
      { Month === 2 && <button>맞습니다.</button> }
      {/* or */}
      <div>지금은 2월입니까?</div>
      { Month === 2 ? <button>맞습니다.</button> : <button>틀립니다.</button> }
    </div>
  );
}

 

 

모든 결과는 아래 사진과 같습니다.

 

 

4. 화면에 렌더링 되지 않아야 하는 경우 null로 처리

function App() {
  const Month = 2;
  return (
    <div className="App">
      <div>2월이라면 아무것도 표시하지 않습니다</div>
      { Month === 2 && null }
    </div>
  );
}

 

 

---

✔️ 참고

https://dev-pengun.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88-%EB%B0%B0%EC%9A%B0%EA%B8%B0-6-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81