목록 렌더링

데이터 모음에서 여러 개의 유사한 컴포넌트를 표시하고 싶을 때가 많습니다.JavaScript 배열 메서드를 사용하여 데이터 배열을 조작할 수 있습니다. 이 페이지에서는filter()와 map()를 React와 함께 사용하여 데이터 배열을 필터링하고 컴포넌트 배열로 변환하는 방법을 배웁니다.

배열에서 데이터 렌더링하기

콘텐츠 목록이 있다고 가정해 보겠습니다.

이러한 목록 항목들 사이의 유일한 차이점은 그 내용, 즉 데이터입니다. 인터페이스를 구축할 때는 댓글 목록부터 프로필 이미지 갤러리까지 다양한 데이터를 사용하여 동일한 컴포넌트의 여러 인스턴스를 표시해야 하는 경우가 많습니다. 이러한 상황에서는 해당 데이터를 JavaScript 객체와 배열에 저장하고map() 및 filter()와 같은 메서드를 사용하여 컴포넌트 목록을 렌더링할 수 있습니다.

다음은 배열에서 항목 목록을 생성하는 간단한 예시입니다:

1. 데이터를 배열로 이동합니다:

1. people멤버들을 새로운 JSX 노드 배열인listItems로 매핑합니다:

1. 컴포넌트에서listItems를 <ul>로 감싸서 반환합니다:

결과는 다음과 같습니다:

위 샌드박스에는 콘솔 오류가 표시됩니다:

이 오류를 해결하는 방법은 이 페이지 후반부에서 배우게 됩니다. 그 전에 데이터에 구조를 추가해 보겠습니다.

배열 항목 필터링하기

이 데이터는 더욱 구조화될 수 있습니다.

직업이 'chemist'인 사람들만 표시하는 방법을 원한다고 가정해 보겠습니다. JavaScript의filter()메서드를 사용하여 해당 사람들만 반환할 수 있습니다. 이 메서드는 항목 배열을 가져와 "테스트"(true또는false를 반환하는 함수)를 통과시킨 후, 테스트를 통과한 항목들(true를 반환한 항목)만으로 구성된 새로운 배열을 반환합니다.

여기서는 profession이 'chemist'인 항목만 원합니다. 이를 위한 "테스트" 함수는(person) => person.profession === 'chemist'와 같습니다. 이를 조합하는 방법은 다음과 같습니다:

1. 생성: people 배열에 filter()를 호출하여person조건으로 필터링한 "화학자"만의 새로운 배열chemists를 만듭니다:

1. 이제chemists배열에 대해map을 수행합니다:

1. 마지막으로, 컴포넌트에서listItems를 반환합니다:

key로 목록 항목 순서 유지하기

위의 모든 샌드박스에서 콘솔에 오류가 표시되는 것을 확인하세요:

각 배열 항목에 key를 부여해야 합니다 — 이는 해당 배열 내 다른 항목들 중에서 해당 항목을 고유하게 식별하는 문자열이나 숫자입니다:

Key는 React에게 각 컴포넌트가 어떤 배열 항목에 해당하는지 알려주어 나중에 매칭할 수 있게 합니다. 이는 배열 항목이 이동(예: 정렬), 삽입 또는 삭제될 수 있는 경우 중요해집니다. 잘 선택된key는 React가 정확히 어떤 일이 발생했는지 추론하고 DOM 트리에 올바른 업데이트를 수행하는 데 도움이 됩니다.

실행 중에 key를 생성하기보다는 데이터에 포함시켜야 합니다:

키를 어디서 얻을 수 있나요

데이터의 출처에 따라 키의 출처도 다릅니다:

• 데이터베이스의 데이터:데이터가 데이터베이스에서 온 경우, 본질적으로 고유한 데이터베이스 키/ID를 사용할 수 있습니다.
• 로컬에서 생성된 데이터:데이터가 로컬에서 생성되고 유지되는 경우(예: 메모 작성 앱의 메모), 항목을 생성할 때 증가하는 카운터,crypto.randomUUID() 또는 uuid와 같은 패키지를 사용하세요.

키의 규칙

• 키는 형제 간에 고유해야 합니다. 그러나 다른배열의 JSX 노드에 동일한 키를 사용하는 것은 괜찮습니다.
• 키는 변경되어서는 안 됩니다그렇지 않으면 그 목적이 무너집니다! 렌더링 중에 키를 생성하지 마세요.

React는 왜 키가 필요할까요?

데스크톱의 파일에 이름이 없다고 상상해 보세요. 대신 순서(첫 번째 파일, 두 번째 파일 등)로 참조하게 됩니다. 익숙해질 수는 있지만, 파일을 삭제하면 혼란스러워질 것입니다. 두 번째 파일이 첫 번째 파일이 되고, 세 번째 파일이 두 번째 파일이 되는 식입니다.

폴더의 파일 이름과 배열의 JSX 키는 유사한 목적을 제공합니다. 이들은 형제 항목 사이에서 항목을 고유하게 식별할 수 있게 해줍니다. 잘 선택된 키는 배열 내 위치보다 더 많은 정보를 제공합니다. 재정렬로 인해위치가 변경되더라도 key를 통해 React는 항목의 수명 동안 이를 식별할 수 있습니다.

요약

이 페이지에서 배운 내용:

• 컴포넌트에서 데이터를 꺼내 배열이나 객체 같은 데이터 구조로 옮기는 방법.
• JavaScript의 map()을 사용해 유사한 컴포넌트 집합을 생성하는 방법.
• JavaScript의 filter()를 사용해 필터링된 항목의 배열을 만드는 방법.
• 컬렉션 내 각 컴포넌트에key를 설정해야 하는 이유와 방법. 이를 통해 위치나 데이터가 변경되더라도 React가 각 컴포넌트를 추적할 수 있습니다.