[번역] Tutorial: Adding Time Travel 4

Picking a Key

키 선택하기

 

When we render a list, React stores some information about each rendered list item. When we update a list, React needs to determine what has changed. We could have added, removed, re-arranged, or updated the list’s items.

리스트를 렌더할 때, 리액트는 리스트 아이템을 렌더링한 정보들을 저장한다. 리스트를 업데이트 할 때, 리액트는 무엇이 바뀌었는지 결정할 필요가 잇다. 우리는 리스트의 항목들을 추가하거나 삭제하거나 재배열하거나 업데이트 할 수 있다.

 

Imagine transitioning from

바뀌었다고 상상해보자 이것이

to

이것으로.

In addition to the updated counts, a human reading this would probably say that we swapped Alexa and Ben’s ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what we intended. Because React cannot know our intentions, we need to specify a key property for each list item to differentiate each list item from its siblings. One option would be to use the strings alexa, ben, claudia. If we were displaying data from a database, Alexa, Ben, and Claudia’s database IDs could be used as keys.

업데이트된 카운트 외에도 이것을 읽는 인간은 아마 이렇게 말할 것이다. alexa와 ben의 순서가 바뀌었고 그 둘 사이에 claudia가 삽입되었네. 그러나 리액트는 컴퓨터 프로그램이며 우리의 의도가 무엇인지 알지 못한다. 리액트는 우리의 의도를 알지 못하기 때문에, 각각의 리스트 항목에 키 속성을 부여하는 것이 필요하다. 형제들 사이에 각각의 리스트 아이템들을 구별짓기 위해서. 하나의 선택 사항은 텍스트를 사용하는 것이다. alexa, ben, claudia. 만일 우리가 데이터베이스에서 데이터를 표현하는 거라면 alexa, ben, claudia의 데이터베이스 id가 key로 사용될 수 있다.

 

When a list is re-rendered, React takes each list item’s key and searches the previous list’s items for a matching key. If the current list has a key that didn’t exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved. Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component’s key changes, the component will be destroyed and re-created with a new state.

리스트가 재렌더링될 때, 리액트는 각각의 리스트 항목의 key를 취해서 이전 리시트 항목중에 키가 맞는 것을 찾는다. 만약 현재 리스트가 이전에 존재하지 않는 키를 가지고 있다면, 리액트는 컴포넌트를 생성한다. 만약 현재 리스트가 이전에 있는 리스트들에 존재하는 키와 일치하는 것을 못찾는다면, 리액트는 이전 컴포넌트를 파괴한다. 만일 두개의 키가 일치한다면 일치하는 컴포넌트로 옮긴다. 키들은 리액트에게 각각의 컴포넌트들의 고유성에 대해 말해준다. 이것은 리액트가 리렌더링 사이에서 state를 유지할 수 있게 해준다. 만약 컴포넌트의 키가 바뀐다면, 컴포넌트는 파괴되고 다시 만들어질 것이다. 새로운 state로.

 

key is a special and reserved property in React (along with ref, a more advanced feature). When an element is created, React extracts the key property and stores the key directly on the returned element. Even though key may look like it belongs in props, key cannot be referenced using this.props.key. React automatically uses key to decide which components to update. A component cannot inquire about its key.

리액트에서 키는 특별하고 예정된 속성이다.(더 고급기능인 ref처럼). 요소가 만들어졌을 때, 리액트는 키 속성을 추출하고 직접적으로 반환된 요소에 키를 저장한다. 심지어 키가 props처럼 생겼을지라도, 키는 this.props.key로 사용될 수 없다. 리액트는 자동적으로 키를 사용한다. 컴포넌트의 업데이트를 결정하기 위해서. 컴포넌트는 키에 대해 물을 수 없다.

 

It’s strongly recommended that you assign proper keys whenever you build dynamic lists.If you don’t have an appropriate key, you may want to consider restructuring your data so that you do.

강력하게 추천한다. 너가 다양한 리스트를 만들 때마다 더 적절한 키를 할당하기를. 만약 너가 키를 적절하게 갖고 있지 못하다면, 너의 데이터 구조를 재구조화할 것을 고려해볼 수도 있다.

 

If no key is specified, React will present a warning and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list’s items or inserting/removing list items. Explicitly passing key={i} silences the warning but has the same problems as array indices and is not recommended in most cases.

만약 키를 지정하지 못했다면, 리액트는 현재 경고를 보낼것이다. 그리고 기본적으로 배열의 index를 사용할 것이다. 배열의 인덱스를 키로 사용하는 것은 문제가 있다. 리스트의 아이템들이 재정렬하거나 리스트 아이템의 삽입이나 삭제가 있을 때. 명시적으로 key={i}로 전달하면 경고가 사라진다. 그러나 배열의 색인으로서 같은 문제를 가지고 있고 대부분의 경우에 권장되지 않습니다.

 

Keys do not need to be globally unique; they only need to be unique between components and their siblings.

키들은 전역적으로 특별할 필요는 없다. 오직 그들의 형제들과 컴포넌트 사이에서만 특별하면 된다.