복습 및 좋은 글들
React Hook
Hook 규칙
- 최상위 레벨에서만 호출 되어야 한다.
- 컴포넌트 안에서만 사용할 수 있다.
- 컴포넌트가 렌더링 될때마다 매번 같은 순서로 호출 되어야 한다.
값의 재사용이 아닌 로직의 재사용을 위해 사용 되어야만 함.
useState
- 컴포넌트가 가질 수 있는 상태라는 의미
- 원시값 상태 관리
- 참조값 상태 관리
- 값이 비싼 상태 관리(초기값 세팅에 복잡한 연산이 필요한 경우)
useEffect
- 이펙트를 사용하면 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 사이드 이펙트를 지정할 수 있다.
-
렌더링 될 때마다 실행
-
첫번째 렌더링 시에만 실행
-
첫 렌더링 + 특정 값들이 바뀔 때만 실행
-
정리 함수 (cleanUp)
1. 렌더링 될 때마다 실행
useEffect의 두번째 인자를 입력하지 않음.
2. 첫번째 렌더링 시에만 실행
useEffect의 두번째 인자로 빈 배열 입력.
3. 첫 렌더링 + 특정 값들이 바뀔 때만 실행
useEffect의 두번째 인자로 빈 배열 안에 감지할 특정 값을 집어 넣고 입력.
4. 정리 함수 (cleanUp)
return 함수에 콜백 함수로 구현해서 넣는다.
useLayout
useEffect와의 차이, 자주 사용되지는 않지만 간혹 필요할 경우가 있음.
과제_타이머
useRef
ref는 컴포넌트 전 생애주기를 통해 유지가 됨.
=> 리렌더링 되어도 값은 유지된다.
- 특정 상태값이 변할 때, 리렌더링 시키면 안 되는 상태값인 경우
- 컴포넌트 내 특정 돔 요소에 접근해야 하는 경우
- 컴포넌트의 자식 컴포넌트의 돔에 접근해야 하는 경우(forwardRef)(거희 사용하지 않음)
1. 특정 상태값이 변할 때, 리렌더링 시키면 안 되는 상태값인 경우
state / var(일반 변수) / ref 의 버튼 클릭시 +1 예제
- 값이 변할 때마다 리렌더링을 하는 경우
- 값은 변하지만 렌더링이 되지 않는 경우
- 값은 변했지만 리렌더링 상황에서만 렌더링에 반영이 되는 경우
ref 는 렌더링의 영향을 받지 않고 값을 변화 시킬 수 있음.
2. 컴포넌트 내 특정 돔 요소에 접근해야 하는 경우
렌더링할 HTML 요소에 ref 속성을 지정, focus의 예제
3. 컴포넌트의 자식 컴포넌트의 돔에 접근해야 하는 경우(forwardRef)
과제
useContext
createContext 로 컨텍스트를 생성
....
과제
useMemo & useCallback
useMemo : 값의 재사용
useCallback : 함수의 재사용
과제
useReducer
useState 와 비슷하나, 복잡한 상태 (nested object)를 관리하는데 사용.
혹은 이전 상태에 의존하는 상태를 관리하는 데 사용(특화).
action(행위) / dispatch(요구) / reducer(상태 업데이트)
과제
customHook
과제
열었던 링크들
setInterval / clearInterval 을 이용한 함수 반복 중단, 재시작
deepl번역기
[React] forwardRef 사용법
npm_uuid
