React2 [React] Warning: Each child in a list should have a unique "key" prop in Fragment React에서 리스트를 활용해서 화면 요소를 만들어 낼 때는 태그에 key 속성을 부여하는 것이 좋다. React 공식 문서에 따르면 key에 대해 다음과 같이 설명한다. "Keys help React identify which Items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity" key 속성은 어떤 요소들이 추가, 삭제, 변화가 있을 때 React 라이브러리가 쉽게 찾아낼 수 있도록 하는 역할을 한다. 찾아보니 실제 DOM과 가상 DOM을 비교하는 diffing 알고리즘에서 활용되는 것 같다. 회사 프로젝트.. 2022. 5. 11. React component props에 typescript 일부 적용하기(history, setState, withRouter) 토이 프로젝트에서 React component의 props에 typeScript를 적용하면서 생기게 된 사항들을 정리해 보았다. 1. history props type 정의 페이지 이동을 위해 history 객체를 props로 받아 push 메소드를 사용했는데, props에 이 history 객체에 대한 type을 정의하는 방법을 몰라 찾아보았다. 검색으로 찾아 본 내용으로는 react-router-dom 패키지에서 RouteComponentProps를 가져와 선언하면 되는 형태였다. RouteComponentProps의 정의된 interface 형태는 아래와 같다. export interface RouteComponentProps< Params extends { [K in keyof Params]?: .. 2022. 4. 30. 이전 1 다음