리액트 프레임워크에서 조건부 렌더링과 리스트 렌더링을 구현하는 방법에 대해 알아보겠습니다.

조건부 렌더링

리액트에서 조건부 렌더링은 특정 조건에 따라 다른 JSX 요소를 출력하는 것을 의미합니다. 이는 if 문이나 삼항 연산자를 사용하여 구현할 수 있습니다.

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

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Welcome, User!</p>}
      {!isLoggedIn && <p>Please log in</p>}
    </div>
  );
}

위의 예시에서는 isLoggedIn 변수 값을 기반으로 로그인 상태에 따라 다른 메시지를 출력합니다. isLoggedIn이 true이면 “Welcome, User!” 메시지가, false이면 “Please log in” 메시지가 렌더링됩니다.

삼항 연산자를 사용한 조건부 렌더링

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in</p>}
    </div>
  );
}

위의 예시에서는 삼항 연산자를 사용하여 조건에 따라 다른 JSX 요소를 출력하는 방법을 보여줍니다. isLoggedIn이 true이면 “Welcome, User!” 메시지가, false이면 “Please log in” 메시지가 렌더링됩니다.

리스트 렌더링

리액트에서 리스트를 렌더링하기 위해서는 JavaScript의 map 함수를 사용할 수 있습니다. map 함수를 사용하여 배열의 각 요소를 JSX 요소로 변환하고, 이를 렌더링하여 리스트를 출력할 수 있습니다.

function App() {
  const fruits = ['Apple', 'Banana', 'Orange'];

  return (
    <div>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

위의 예시에서는 fruits 배열을 순회하면서 각 과일의 이름을 <li> 요소로 변환하여 출력하고 있습니다. map 함수의 인자로 전달한 콜백 함수에서는 key 속성을 사용하여 각 요소에 고유한 식별자를 부여해야 합니다. 이는 리액트가 효율적으로 업데이트를 수행할 수 있도록 도와줍니다.

이렇게 구현된 리스트는 배열에 포함된 요소의 수에 따라 동적으로 생성되며, 배열이 업데이트될 때 자동으로 다시 렌더링됩니다.

조건부 렌더링과 리스트 렌더링은 리액트 프레임워크에서 자주 사용되는 기능으로, 위의 예시를 참고하여 다양한 상황에 맞게 활용할 수 있습니다.

*참고: React 공식 문서