React의 목록과 키는 무엇입니까? 모든 개발자들은 훌륭한 소프트웨어를 만드는 기초 지식을 알아야 합니다.

본문은 최초로 발표되었다https://www.blog.duomly.com/list-and-keys-in-react/

React intro에 나열하고 입력

React의 목록과 키는 가장 기본적인 개념 중의 하나이다.처음 React 프레임워크를 사용하여 첫 번째 응용 프로그램을 만들기 시작한 초보자들에게 이것은 아마도 첫 번째 무서운 예일 것이다.
더 무서운 것은 거의 모든 응용 프로그램이 반복할 수 있는 내용을 가지고 있기 때문에 목록을 사용하는 것을 피할 수 없다는 것이다.
하지만 사실은 간단하다.그냥 설명이 필요해서요.
이것이 바로 본고에서 목록이 무엇인지, JSX에서 목록을 구축하는 방법, 키가 무엇인지, 목록과 키와 관련된 가장 흔히 볼 수 있는 오류 중 하나를 어떻게 복구하는지 설명하기로 결정한 이유입니다. 컨트롤러에서 여러 번 보실 수 있습니다.
이 글은 React의 목록과 키에 대한 완전한 메모지입니다. 알림이 필요할 때 되돌아올 수 있도록 즐겨찾기 폴더에 저장하십시오.
예전과 같이 읽기보다 즐겨 보는 분들께 저희 유튜브 채널을 방문해 본문의 동영상 버전을 찾아보시기 바랍니다.
우리 시작합시다!

React에 나열

내가 쓴 모든 항목에는 거의 하나의 요소 목록이 나타난다.React는 Javascript를 지원함으로써 JSX의 목록을 간소화합니다.map () 방법입니다.
저기요.Javascript의 맵 () 방법은 부모 그룹을 옮겨다니며, 이 그룹의 요소마다 함수를 호출합니다.그리고 변환된 값으로 새 그룹을 만듭니다.상위 배열은 변경되지 않습니다.
이제 간단한 Todo 애플리케이션을 만들고 있다고 가정해 보겠습니다.프로젝트의 주요 요소는 작업 목록입니다.그것들을 표시하려면 데이터가 필요합니다. 대부분의 경우 데이터는 원소 그룹입니다. 예를 들어 대상이나 문자열일 수 있습니다.
그룹에 데이터가 포함되어 있을 때 사용할 수 있습니다.JSX 어셈블리의 맵() 메서드는 데이터를 요소로 변환합니다.
도형과 코드를 보여 주세요.

const tasks = [
  {text: "Buy flowers", status: "todo"},
  {text: "Go to the dentist", status: "done"},
]
const tasksList = tasks.map(task => {
  return (
  <p>{task.text} - {task.status}</p>
  )
});

목록과 키를 누르면 간단한 대상 그룹으로 제공된 데이터를 그림의 JSX 구성 요소로 변환하는 방법을 볼 수 있습니다.

간단한 JSX 요소가 아닌 다른 구성 요소를 사용할 수 있으며, 그룹의 값을 도구로 전달할 수 있습니다.
이제 React의 JSX 구성 요소에서 목록을 만드는 방법을 알았으면 합니다.이제 이 관건들이 무엇인지, 그리고 본문에서 그 원인을 토론해 봅시다.

반응 키

위에서 볼 수 있는 방식으로 원소 목록을 만들 때, 키가 필요합니다.key는 요소에 포함되어야 하는 특수한 속성으로 문자열이어야 한다.모든 목록의 키는 유일해야 합니다. 이것은 키와 같은 값을 사용해서는 안 된다는 것을 의미합니다.다시 말하면 키는 형제자매 사이에서 유일한 것이지 전체적인 것이 아니다.
예를 들어, 우리의 예시에서, 당신은 상태나 텍스트를 키로 사용해서는 안 됩니다.
키는 원소의 id 형식으로 변경, 추가, 삭제에 도움이 됩니다.
배열의 항목에 대한 고유한 식별자를 선택하는 것은 일반적으로 ID입니다.
우리들은 우리의 예를 좀 수정합시다.

const tasks = [
  {id: "1", text: "Buy flowers", status: "todo"},
  {id: "3", text: "Go to the dentist", status: "done"},
]
const tasksList = tasks.map(task => {
  return (
  <p key={task.id}>{task.text} - {task.status}</p>
  )
});

위 코드에서, 나는 모든 작업의 id를 사용하여 나의 목록 항목을 표시한다.이 예에서, 이것은 이미 문자열이지만, 그렇지 않으면, 우리는 .toString() 방법으로 그것을 변환해야 한다.
그러나 사용할 수 있는 id나 다른 유일한 값이 없을 수도 있습니다.그리고 또 다른 해결 방안이 있습니다 index.

const tasks = [
  {text: "Buy flowers", status: "todo"},
  {text: "Go to the dentist", status: "done"},
]
const tasksList = tasks.map((task, index) => {
  return (
  <p key={index}>{task.text} - {task.status}</p>
  )
});

키를 전달하지 않으면 React도 기본적으로 이렇게 할 수 있지만, 이것은 추천하는 해결 방안이 아닙니다. 특히 요소를 조작하려면, 예를 들어 위치를 변경하는 것입니다.
키가 DOM에서 React가 요소를 표시할 수 있는 유일한 것임을 감안하면, 요소를 추가하거나 삭제하고 인덱스가 키로 존재한다면, React는 구성 요소가 실제로 변경되었음을 의식하지 못할 수도 있습니다.
키에서 색인을 사용하면 프로그램을 파괴하거나 잘못된 데이터를 표시할 수 있습니다. 이것은 피하고자 하는 것입니다.
당신의 프로젝트로서 당신은 사용해서는 안 됩니까?
목록의 키로 사용할 수 있도록 세 가지 조건을 모두 충족해야 합니다.

목록을 정렬하거나 필터링한 적이 없습니다

목록이나 목록 항목을 변경하거나 계산한 적이 없습니다

목록에 있는 항목에 ID가 없습니다

.
좋습니다. 키에 대해 많이 알고 있기 때문에 데이터에 키가 없으면 유일한 키를 어떻게 만드는지 확인해 보겠습니다.

고유 키는 어떻게 생성합니까?

만약 사용자가 사용하고 있는 데이터가 ID나 다른 식별자와 같은 유일한 값이 없다면, 색인과 다른 값을 사용해야 합니다.이런 상황에서 적어도 두 가지 방법이 있다.

자체 생성 키

간단한 자바스크립트 함수를 만들어서 무작위 수나 문자열을 만들 수 있습니다.new Date()도 사용할 수 있습니다.getTime () Javascript 방법은 임의의 수를 만들고 접두사를 추가하여 키로 사용합니다.

기존 플러그인 사용

React 목록에 고유한 키를 생성할 수 있는 몇 가지 기존 솔루션이 있습니다.내가 자주 사용하는 방법은 index과generate() 방법이다.다른 추천은 index과shortid입니다.이 모든 것은 설치와 사용이 매우 쉽다.
위대하다나는 이것이 React의 목록과 키의 거의 모든 문제를 해결할 수 있기를 바란다.

리스트에 있는 모든 아이들은 유일한'열쇠'도구를 가지고 있어야 한다

본고에서 언급한 마지막 점은 개발 과정에서 컨트롤러에서 가장 흔하고 오래된 오류를 볼 수 있다는 것입니다.
다음 오류 uuid 를 보았을 때, 유일한 해결 방안은 목록 항목마다 유일한 키를 추가하는 것임을 알 수 있습니다.
키를 분배했지만 오류가 발생했습니다. 이것은 모든 키가 유일한 것이 아니라는 것을 의미할 수 있습니다.이 문제를 해결하려면 귀하의 관건적인 가치가 유일하다는 것을 확보하기 위해 상술한 해결 방안 중 하나를 사용해야 합니다.

요약

이 문서에서, 나는 당신에게 어떻게 React JSX에 목록을 생성하는지, 키가 무엇인지, 그리고 왜 그것들을 추가해야 하는지 설명했습니다.
고유 ID를 생성하는 데 사용할 수 있는 방법과 키 유일성이 어떤 경우에 중요한지 이해했습니다.
나는 네가 이 안내서가 매우 유용하다는 것을 발견할 수 있기를 바란다. 특히 ReactJS나 전방에서 개발한 초보자로서.
React 구성 요소의 라이프 사이클에 대해 알고 싶으면 저희 블로그의 이전 동영상을 보십시오.목록이 있는 첫 번째 응용 프로그램을 만들려면 React JS 자습서를 참조하십시오.

읽어주셔서 감사합니다.
둠리에서 온 안나