React Hooks정리 및 쫌쫌따리
constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
컴포넌트가 업데이트 되는 상황 :
- props가 변경될때
- State가 변경될때 -> setState
- 부모 컴포넌트가 리렌더링 될 때
- This.forceUpdate로 강제로 렌더링을 트리거할 때
라이프사이클 메서드
render() -> 라이프 사이클 메서드 중, 유일하게 필수 메서드
React hook정리
useState
-> 형태 : const [a, setA] = useState(type) 상태관리 -> 기본적으로 상태관리할 때 사용하는 훅, 근데 렌더링이 느려서 값이 마음대로 바로바로 업데이트가 안됨
useEffect
-> 형태 useEffect(() => {}, [파라미터]) -> 파라미터에 useState의 상태를 넣어서 사용하면 새롭게 렌더링될때, 느리게 상태가 변경되는 문제없이 바로 update됨.
—> 첫 렌더링할 때만 실행하고 업데이트할 땐, 실행하고 싶지 않으면 빈배열[]인체로 놓으면 된다.
useReducer
-> 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음. -> redux와 관련있는듯.. 아직은 잘 모름 / 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수.
흠.. 근데 아무리 생각해도 useState로도 충분할 거 같아서.. 왜 useReducer를 사용해야하는지 찾아봄
코드길이 줄일 수 있음. -> 그래서 가독성이 올라간다.. 다른 장점도 있긴 한데.. useReducer를 사용할 만큼의 장점은 아닌거 같다(뭐..관리해야하는 state가 많다면.. 사용해도 좋긴한데,, 그럴거면 그냥 다른 상태 관리 라이브러리를 사용하는게 낫지않나라는 생각도 들고..).. 그리고 공식 문서에서도 개취라고 나와있다고 하더라구요..
useMemo
-> 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행
useCallback
-> useMem와 상당히 비슷. 사용목적은 렌더링 성능의 최적화, 기존에 있던 함수를 재사용할 수 있음 . 첫번째 파라미터에는 생성하고 싶은 함수를 넣고 두번째 파라미터에는 배열을 넣으면 됨. 함수 내부에서 상태 값에 의존해야할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜주어야함
useRef -> ref를 사용할 수 있게해줌.. 그러니까 원래는 부모 -> 자식의 방향으로 데이터를 옮기는게 일반적인데 useRef를 사용하면 거꾸로 가능하다.
커스텀 hooks도 만들 수 있다..
권장되는 사항은 함수 컴포넌트와 hooks 사용이라고 한다..