[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 조건부 렌더링과 반복 렌더링

조건부 렌더링

조건부 렌더링을 사용하면 특정 조건에 따라 컴포넌트나 요소를 렌더링할 수 있다. 자바스크립트의 조건문을 사용하여, 특정 조건이 참일 때만 컴포넌트를 렌더링하거나, 조건에 따라 다른 컴포넌트를 렌더링할 수 있어 효율적인 UI관리가 가능하다.

if문

import { useState } from "react";

const App = () => {
  const [isLogin, setIsLogin] = useState(true);

  if (isLogin) {
    return (
      <>
        <h1>Hello, Login!</h1>
      </>
    );
  }

  return (
    <>
      <h1>Hello, Not Login!</h1>
    </>
  );
};
export default App;

삼항 연산자

const App = () => {
  const isLoggedIn = true;

  return (
    <>{isLoggedIn ? <h1>Logged In Successful</h1> : <h1>LogIn Failed</h1>}</>
  );
};

export default App;

논리 연산자

const App = () => {
  const isLoggedIn = true;

  return (
    <>
      {isLoggedIn && <h1>Logged In Successful</h1>}
      {!isLoggedIn && <h1>LogIn Failed</h1>}
    </>
  );
};

export default App;

즉시 실행 함수

const App = () => {
  const isLoggedIn = true;

  return (
    <>
      {(() => {
        if (isLoggedIn) {
          return <h1>Logged In Successful</h1>;
        }

        return <h1>LogIn Failed</h1>;
      })()}
    </>
  );
};

export default App;

즉시 실행 함수는 많이 사용되는 방식은 아니라고 한다.

즉시실행 함수는 처음사용해봐서 낯선 느낌이 많이 들었다. 조건부를 작성할 때 삼항연산자나 논리연산자를 사용하기에 가독성이 떨어질 것 같은 곳(조건 결과가 3가지 이상일 때...?)에서 사용하기 좋아보인다. 그러나 그런 경우에도 그냥 컴포넌트를 분리하고 if문을 사용해서 조건부 렌더링을 진행하는 것이 더 좋을 것 같다.

 

반복 렌더링

특정 컴포넌트 요소를 반복적으로 출력하는 렌더링 방식을 말한다.

일반적으로 javascript array 객체의 내장함수 map을 사용해 표현한다.

const App = () => {
  const fruites = ["Apple", "Banana", "Cherry"];

  return (
    <>
      <ul>
        {fruites.map((fruite) => (
          <li>{fruite}</li>
        ))}
      </ul>
    </>
  );
};

export default App;

객체 배열을 사용할 수 있으며, 반복 컴포넌트를 별도의 커스텀 컴포넌트로 제작해서 넣어줄 수도 있다.

주의사항

반복하는 컴포넌트는 반드시 컴포넌트를 구분할 수 있는 key 속성을 부여해야 한다.

users.map(({ name, age }) => <ListItem key={name} name={name} age={age} />);

 

ListItem에서 key 속성을 props로 받아서 출력해보자. 그러면 다음과 같은 오류가 출력된다.

이를 통해 key속성은 반복 처리를 할 때 고유하게 구분하는 역할만 한다는 것을 알 수 있다.

 

간혹 key 속성에 아이템의 index를 부여하는 경우가 있는데, 개발의 편의를 위해 사용할 수 있지만 사실 지양하는 것이 좋다.
정적인 데이터를 사용하거나 아이템이 추가될 때 반드시 배열의 맨 마지막에 순차적으로 추가된다고 하면 사용해도 괜찮지만 만약 아이템이 맨 처음이나 중간에 추가된다고 하면 추가되는 아이템뿐만 아니라 그 뒤의 컴포넌트가 모두 재렌더링되기 때문에 최대한 지양하는 것이 좋다.