- useCallback (useEffect dependency로 useCallback 함수 쓰는 게 best practice라고 한다)
- useRef 써서 useEffect 2번 렌더링 해결하는 방법
- React Router 중 에서 exact, index 속성은 무슨 의미인지
- useParams 정확한 사용법
useRef
리액트에서 특정 DOM을 선택할 때 사용한다.
(JavaScript의 querySelector처럼)
https://reactjs.org/docs/hooks-reference.html#useref
이거 읽고 Vitesh 코드 보니까 어떻게 useRef를 사용해서 cocktailList 2번 렌더링되는 걸 방지했는지 이해 된다.
useEffect가 2번 실행되는 걸 막진 못하고, 2번째 실행될 때는 랜덤 칵테일을 생성하지 않도록 설정한 것 같다. (맞는지 나중에 질문하기~)
React Router
- exact: exact 속성이 있으면 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여준다.
- index: 부모
<Routes path="teams">
</Routes>우리 프로젝트의 경우에는 Routes 태그에 path가 없어서 루트 경로( / )일 때 index로 지정한 컴포넌트가 렌더링되는 것 같다.
useCallback
memoized된 (부모 컴포넌트가 업데이트되어도 부모의 props를 받고 있지 않다면 리렌더링되지 않는 것) 버전의 콜백을 리턴한다. 이 콜백 함수는 dependency 중 하나가 변경되었을 때에만 변한다.
참고한 자료: 리액트 공식 문서
근데 아직 제대로 이해 못 했다. 우선 이해한 만큼만 적어봤다.
✨