Day 3 of #100DaysOfCode — React에서 List Rendering 및 Conditional Rendering 이해

Source: Dev.to

React에서 리스트 렌더링

리스트 렌더링은 제품, 사용자 상세 정보, 메시지, 메뉴 항목 등과 같은 데이터 컬렉션을 UI에 동적으로 표시하는 과정입니다. React에서는 보통 map() 함수를 사용합니다.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

return (
  

    {users.map(user => (
      - {user.name}

    ))}
  

);

key가 중요한 이유

렌더링된 리스트의 각 요소는 **고유한 key**가 필요합니다. key는 React가 다음을 수행하도록 돕습니다:

• 요소들을 구분합니다.
• 전체 리스트를 다시 렌더링하지 않고도 효율적으로 요소를 업데이트하거나 제거합니다.

팁: key는 고유하고 안정적이어야 합니다. 좋은 예로는 id, 사원 번호, 혹은 시간이 지나도 변하지 않는 값이 있습니다. 리스트가 정적이고 변하지 않을 경우를 제외하고는 배열 인덱스를 key로 사용하는 것을 피하세요.

map()을 사용하는 것이 React 친화적인 접근 방식입니다. for 루프도 리스트를 렌더링할 수는 있지만, 일반적으로 더 복잡하고 가독성이 떨어집니다.

React에서 조건부 렌더링

조건부 렌더링은 특정 조건에 따라 요소를 보여주거나 숨길 수 있게 해줍니다. 이는 동적으로 변하는 사용자 인터페이스에 특히 유용합니다.

예시: 사용자의 인증 상태에 따라 대시보드 또는 로그인/회원가입 페이지를 표시하기:

function AuthPage({ isLoggedIn }) {
  return (
    
      {isLoggedIn ?  : }
    
  );
}

다음과 같은 경우에 조건을 적용할 수 있습니다:

• 개별 요소
• 전체 페이지 또는 컴포넌트

사용 사례:

• 로그인되지 않은 사용자에게만 로그인/회원가입 페이지 표시
• 오류 메시지 또는 성공 알림 표시
• 사용자 역할이나 권한에 따라 UI 기능 토글

조건부 렌더링을 통해 UI가 동적이고 반응적이며 사용자 중심이 됩니다.

핵심 정리

• 리스트 렌더링은 map()을 사용해 배열을 JSX 요소로 변환합니다.
• 각 리스트 아이템에 **고유한 key**를 제공하여 React가 변경 사항을 효율적으로 추적하도록 합니다.
• 조건부 렌더링은 조건에 따라 표시되는 내용을 제어해 UI를 유연하게 만듭니다.
• 두 기술을 결합하면 React 애플리케이션을 확장 가능하고 유지 보수하기 쉬운 구조로 만들 수 있습니다.