회사의 코드라 임의의 url, code로 작성합니다.
상황
회사에서 MVP 개발을 하는데, dynamic url로 동적 페이지를 개발하였다. 상세 페이지를 계속해서 history로 쌓아야한다.
ex) https://temp.com/detail/[id] 에서 [id]가 동적
문제
1. React Native처럼 page가 Stack에 쌓일 거라 생각했다. React Native는 replace가 없었다고..
그래서 push 사용했다. 그런데..
2. push를 하니 url은 바뀌지만 화면이 reload 되지 않는다...!
해결방안
- url을 변경 시킨 후 reload를 하자...
- 이전 history를 조회하여 동적 페이지 routePath(detail/[id])가 포함되면 reload, 아니면 하지말자...
방안들의 문제점
- 뒤로가기 시에도 reload가 되어서 원치 않는 페이지에서도 reload가 된다.
- 이전 history와 현재 history를 저장하는 코드를 작성해야한다.
해결
동적 페이지에 unique key를 부여하자
이전 코드
<Container>
<Form.../>
...
</Container>바꾼 코드
<Container key={Number(id)}>
<Form.../>
...
</Container>배운점
이 방법을 통하여 해결방안 1의 문제점인 동적 페이지가 아닌 페이지에서의 reload를 방지할 수 있었다. 해결방안 2의 history를 저장할 필요도 없어졌다. 이를 통해 코드의 양을 줄이고 작은 양이지만 memory도 절약할 수 있었다.
REMIND
React에서 Key 역할[React 공식문서 발췌]
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}> {number}
</li>
);Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.
const todoItems = todos.map((todo) =>
<li key={todo.id}> {todo.text}
</li>
);렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs <li key={index}> {todo.text}
</li>
);항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny’s가 작성한 글인 인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명을 참고하시길 바랍니다. 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
.
따라서 동적 페이지의 key 값으로 다른 페이지라는 것을 식별한다!!!!
느낀 점
React에서의 map, React Native에서의 FlatList에서 key값의 중요성은 알고 있었지만 웹페이지의 동적 페이지에서의 key 값의 중요성은 몰랐다.
역시 key 고유값은 중요하다!
Reference
