Today Ariticle
-
리뷰는 여기서 - 일일 아티클
Today PoiemaWeb
-
내용 정리는 여기서 - Poiemaweb 읽기 - JavaScript
Today Commit Review
Today I Learned
-
useRef로 "값이 변해도 리렌더링하지 않는" 변수를 만들 수 있다. todolist 추가 시 nextId 변수라던가, setTimeout id, 외부 라이브러리 스크롤 위치? 등
-
불변성을 지키며 배열의 요소를
- 추가할 때 : 스프레드 연산자 또는 concat
- 삭제할 때 : filter
- 변경할 때 : map
-
useEffect의 첫 번째 인자인 콜백에서
-
콜백 본문은 "해당 컴포넌트가 마운트 된 후에 실행할 작업",
- props로 받은 값을 컴포넌트의 state로 설정할 때
- REST API
- D3, Video.js
- setTimeout, setInterval 등 설정
-
콜백이 return하는 함수는 "해당 컴포넌트가 언마운트 된 후에 실행할 작업"이다.
- clearTimeout, clearInterval
- 라이브러리 인스턴스 제거
-
-
useEffect의 두 번째 인자인 deps에 "현재 컴포넌트가 받은 props 중 callback에서 사용하는 값"을 등록해두어야 한다.
-
useMemo : 이전에 연산한 값을 재사용(변경되지 않았다면)
-
useCallback : 함수 재사용
-
참고로, useMemo, useCallback의 콜백이 setState를 호출한다면 setState의 인자는 "변경될 값"이 아닌 "변경될 값을 반환하는 함수"로 넣어줘야 불필요한 리렌더링을 방지할 수 있다. 이 경우, useMeom와 useCallback의 deps에 참조하는 props를 넣지 않아도 된다
-
React에서 해당 컴포넌트가 리렌더링 되면, "그 컴포넌트 함수가 다시 실행"된다. 내가 만든 Deact처럼 어디 저장해두는게 아닌듯. 그렇기에 함수 내부에 console.log를 찍어보면 렌더링 될 때 마다 찍힘.
-
setState로 선언한 value, setValue에서, setValue가 호출되면 "변경된 value를 가진 새로운 컴포넌트 함수가 실행"된다. 따라서 setValue이후 코드는 버려지는 것 같다.? 정리용이 아닌 이상..
Today Review
- hook에 대해 정리하는 글을 따로 작성해야겠다. useState는 제법 간단하지만, useEffect는 좀 복잡하고.. useMemo도 좀 더 깊게 파보아야 할 듯
