반응 - 키의 숨겨진 기능

React가 당신에게 화내지 않도록 목록에 대해 keys를 통과해야 한다는 것을 알고 있습니까?

그래서 당신은 생각합니다: 왜 그냥 key 모든 것이 아닌가? 더 좋은 점은… 무작위로 만들지 않는 이유는 무엇입니까?

열쇠!

매핑하는 목록 외에는 키가 기능이 없다고 생각할 수 있습니다. 결국 전부는 아니지만 대부분의 자습서에서는 목록 매핑의 맥락에서만 키를 언급합니다.

당신이 나와 같다면 아마도 key 목록만, 가끔 잊어버리고 경고를 보고 키를 추가할 것입니다.

그러나 일부 사람들은 다른 방향으로 이동하여 모든 곳에서 key를 사용하기 시작합니다! 때때로 Math.random() 또는 new Date().getTime() 와 같은 임의의 것을 사용합니다.

"이상하지만 괜찮습니다 ..."라고 생각할 수 있지만 그렇지 않습니다! 옳지 않으며 디버깅이 불가능한 버그로 끝날 수 있습니다(실제 React 코드를 디버깅하는 구멍으로 내려가지 않는 한).

키에 대해 알아야 할 사항

서로 다른 수준에 있는 한 동일한 키를 가질 수 있습니다(동일한 구성 요소에서도!).

function ThisIsOk(){
  return (
    <div key="this is ok!">
      <AnyComponent key="this is ok!" />
      <div> {/* here wouldn't be ok */}
        <AnotherComponent key="this is ok!" />
      </div>
    </div>
  )
}

이것은 음… 나무 때문에 발생합니다!

React가 렌더링하는 방법을 보면 기본적으로 하나의 큰 구성 요소 트리라는 것을 알 수 있습니다(또한 이것이 래퍼 없이 여러 구성 요소를 반환하는 구성 요소를 가질 수 없는 이유입니다).

React는 모든 구성 요소를 선택하고 목록을 만들고 여기에 키를 입력하면 몇 가지 일이 발생합니다.

React는 "키를 추가"할 필요가 없습니다(또는 내부적으로 무엇이든)

.

React는 해당 키가 있는 모든 구성 요소를 동일한 구성 요소로 취급합니다!

React는 키를 다시 찾지 못하면 구성 요소를 쉽게 제거합니다.

예:

여기에 작은 샌드박스가 있습니다. 가능하면 입력을 사용해 보세요.

https://codesandbox.io/s/keys-example-ll5rxg?file=/src/App.js



구성 요소를 다시 렌더링해야 할 때마다 다른 키를 찾기 때문에 임의의 항목이 있는 구성 요소가 각 렌더링에서 파괴되고 있습니다. 직접적이든 간접적이든.

그런 다음 키가 없거나 정적 키가 있는 키가 있습니다. 또한 키는 같지만 수준이 다른 것입니다.

마지막으로 이상한 점은 동일한 키를 가진 두 개의 구성 요소가 번갈아 렌더링되는 것입니다. 동일한 키, 동일한 위치이므로 기본적으로 동일한 구성 요소이고 상태가 지속된다고 말하는 것입니다!

이것은 무엇을 의미 하는가?

무슨 일이 있어도 구성 요소를 재설정할 수 없는 버그가 발생하여 상태를 재설정하기 위해 약간의 종속성과 함께 useEffect를 사용하기 시작했습니다. 음, 혼자가 아닙니다!

하지만 이제... 그 이유를 알고 있으며 상태를 재설정하기 위해 다른 키를 전달해야 한다는 것도 알고 있습니다. 아니오useEffect가 필요합니다!

또한 동일한 위치에서 동일한 구성 요소를 렌더링할 수 있고 이전 상태를 유지한다는 것도 알고 있습니다. 이것을 어디에 활용할지 잘 모르겠지만. 그 예도…


표지 사진 작성자: Samantha Lam on Unsplash