[React/리액트] 배열/반복되는 값 렌더링하기

여러 텍스트값 나열하기

export const users = [
  'song',
  'kim',
  'park',
  'choi',
  'heo',
  'lee',
  'ko',
  'kang',
];

위와 같은 유저 명단을 렌더링하기 위해서, 배열의 map 메소드를 이용할 수 있다. 

 

<>
  {users.map((user) => (
    <li>
      {user}
    </li>
  ))}
</>

js 문법을 사용하기 위해 중괄호로 감싸주었고, 렌더링할 배열에 대해 map 메소드를 사용한다. 

이후 각 요소를 li 태그로 감싸주었다. 

 

배열의 값들이 잘 표시되었다. 

 

key 값 설정하기

그러나

다음과 같은 오류가 발생한다. 

각각의 요소에 대한 key 값을 설정해주지 않아서 발생한 요소이다. 

 

key 값을 설정해줘야 하는 이유

각각의 요소를 구분짓고 배열의 수정, 삭제의 과정에서 오류를 발생시키지 않기 위해서 key 값을 설정해준다. 

또, 정확히 어떤 요소가 변화했는지 식별이 어렵다는 문제도 존재한다. 

 

이에 인덱스 값으로 key를 설정하면 되지 않을까 ? 라는 생각도 들 테고, 나도 실제로 그랬던 경험이 존재한다. 

하지만 인덱스 값 역시 배열의 변화에 따라 변동되는 값이기 때문에 바람직한 방법이 아니다. 

 

각 요소를 나타낼 수 있는 특정한 값을 key 값으로 설정하면 React에서 이를 식별하고 판단하는데 도움이 된다. 

 

<>
  {users.map((user) => (
    <li key={user}>
      {user}
    </li>
  ))}
</>

해당 예시에서는 user 값을 그대로 key 값으로 적용해주었다. 

만약 객체와 같이 프로퍼티가 여러개일 경우에는 각 요소를 대표할 수 있는 id 값, name 값 등을 key 값으로 설정해주는 것이 좋다고 생각한다. 

 

반복되는 컴포넌트 렌더링

 

공통 컴포넌트를 제작 후 props와 children을 적절히 활용하여 유사한 컴포넌트들을 렌더링할 수 있다. 

 

{diaryList.map((item) => (
  <DiaryListComponent
    key={item.diaryId}
    feelingListId={item.diaryId}
    feelingListTitle={parseQuotes(item.diaryTitle)}
    feelingListDate={item.createdDate}
    imageUrl={item.imageUrl}
  />
))}

각 diary 값들을 담은 diaryList 객체에 대해 map 메소드를 사용하여 렌더링을 한다. 

 

export default function DiaryListComponent({ 
  feelingListId, 
  feelingListTitle, 
  feelingListDate, 
  imageUrl
}) {
  return (
    <S.DiaryListComponentWrapper>
      <S.Image src={imageUrl}/>
      
      <S.TextWrapper>
        <S.TextTitle>
          {feelingListTitle}
        </S.TextTitle>
        <S.TextDate>
          {feelingListDate}
        </S.TextDate>
        .
        .
        .
  );
}

공통 컴포넌트에서는 각 props 값들을 적절히 렌더링해준다.