Hooks
: 원하는 시점에 정해진 함수가 실행되도록 하는 것
++ Component
➡️ function component가 class component와 동일한 기능 사용할 수 있도록 해줌
useState
: state를 사용하기 위한 Hook
➡️ function component에서는 state 적용 x
➡️ class component처럼 state 적용시키고 싶을 때 !!
➡️ 버튼을 누를 때 마다 카운트가 증가하긴 하지만 값이 바껴서 렌더링 되진 않음 --> ✨ 이 때 useState 사용!!
💡 useState() 사용법
➡️ return값으로 배열 나옴
➡️ [state로 선언된 변수, 해당 state의 set함수]
➡️ count 값 바뀌고 재렌더링
➡️ 변수 각각에 대해 set 함수가 따로 존재
useEffect
: function component에서 side effect를 수행하기 위한 Hook
💡 side effect
다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료돨 수 없기 때문
💡 useEffect() 사용법
➡️ 배열 안의 변수 중 하나라도 값이 변경되면 effect gㅏㅁ수 실행
➡️ 처음 컴포넌트가 렌더링 된 이후, 업데이트로 인한 재렌더링 이후에 실행
💡 Effect Function이 mount, unmount 시에 단 한번씩만 실행
💡 의존성 배열 생략하면 컴포넌트가 업데이트 될 때마다 호출
⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
💡 Memoization
연산량이 많이 드는 함수 호출 결과 저장
같은 입력 값으로 함수 호출하면 새로 함수 호출x
이전에 저장해둔 호출 결과 바로 반환o --> 자원 적게 쓰게 됨
useMemo
: 컴포넌트가 다시 렌더링 될 때마다 연산량 높은 작업 하는 것을 피함 -> 빠른 렌더링
➡️ useMemo에 전달된 함수는 렌더링이 일어나는 동안 실행
➡️ 렌더링이 일어나는 동안 실행되면 안되는 함수는 넣으면 안됨
💡 의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행
➡️ 의존성 배열 넣지 않으면 아무 의미 없음
💡 의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 호출 ➡️ mount 시점에만 렌더링 & 이 후에는 값 변경 x
useCallBack
: useMemo() 훅과 유사하지만 값이 아닌 함수 반환
➡️ 의존성 배열 값이 바뀐 경우에만 함수를 새로 정의 해서
리턴 (렌더링 될 때마다 x)
💡 useCallBack() 사용법
useRef
: 레퍼런스를 사용하기 위한 Hook
++ 💡 레퍼런스
특정 컴포넌트에 접근할 수 있는 객체
💡 useRef() 사용법
