01 Hooks 개요
Hook이란
컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.
유의사항
- React함수(컴포넌트, 훅) 내에서만 사용이 가능
- 반드시 'use'로 시작해야 한다.
- 최상위 레벨에서만 훅을 호출할 수 있다.
(if문 , for문 안 쪽 또는 콜백함수 내에서 호출 금지)
02 State Hook 과 Effect Hook
const App = () => {
const [state, setState] = useState(초기값);
....
}- useSate는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook
- 최초에 useState가 호출될 때 초기값으로 설정되면 재 렌더링이 될 경우 무시된다.
- state는 읽기전용이므로 직접수정해서는 안된다.
- setState를 이용해서 state를 변경해야 된다.
- setState함수를 호출할 때 리엑트의 코어에 재 렌더링하는 함수를 호출하는 원리
Effect hook
const App = () => {
useEffect(EffectCallback, [Deps])
...
}- effec hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
- 컴포넌트가 최초로 렌더링될 떄, 지정한 state나 props가 변경될 때마다 이펙트 콜백함수가 호출된다.
Deps: 변경을 감지할 변수들의 집합(배열)
... 도대체 무슨 소린가.. 하여 chatGPT에게 물어보았다.
useEffcet에 대해서 설명해줘
useEffect는 React의 Hook 함수 중 하나로, 함수형 컴포넌트에서 컴포넌트의 상태나 프로퍼티 등이 변경될 때 특정 동작을 실행할 수 있도록 해줍니다.
useEffect 함수는 첫 번째 매개변수로 함수를 받고, 이 함수는 컴포넌트가 렌더링되고 난 후 실행됩니다.
두 번째 매개변수로는 의존성 배열(deps array)을 받는데, 이 배열에 포함된 값들이 변경될 때마다 useEffect 함수가 실행됩니다.
useEffect 함수가 실행되면, 이전 렌더링과 현재 렌더링 간의 차이점이 발생한 부분에 대해 작업을 수행할 수 있습니다.
예를 들어, useEffect 함수를 사용하여 API 호출을 수행하거나, 브라우저의 localStorage에 값을 저장하거나, 혹은 다른 자바스크립트 라이브러리와의 연동 등 다양한 작업을 수행할 수 있습니다.
useEffect 함수를 사용할 때 주의해야 할 점은, 무한루프를 방지하기 위해 의존성 배열에 올바른 값을 넣어야 한다는 것입니다. 만약 의존성 배열이 빈 배열([])이면, useEffect 함수는 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.
만약 의존성 배열이 null이나 undefined인 경우에는, 컴포넌트가 렌더링될 때마다 useEffect 함수가 실행됩니다.
03 이외의 Hook
useMemo
import {useMemo} from 'react';
일단 import 필수
지정한 state나 props가 변경될 경우 해당 값을 활용해 메모이제이션하여 재렌더링 시 불필요한 연산 줄이기
-
메모이제이션: 컴퓨터 프로그래밍이 동일한 계싼을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 반복 수행을 제거 → 프로그램의 실행 속도를 빠르게 해주는 기술
.동적 계획법의 핵심이 되는 기술이다. -
useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 렌더링 과정과 무관하게 시간이 오래 걸리는 로직을 작성하지 않도록 해야한다.
useCallback
import {useCallback} from 'react';
useMemo는 변수를 일시저장 해두는 개념이라면
useCallback은 함수를 일시저장 해두는 (메모이제이션) 개념이다.
컴포넌트가 재렌더링 될 때마다 함수가 불필요하게 다시 생성되는 것 방지해준다.
useMemo(() => {fn, [deps] }) 와
useCallback(fn, [deps])는 같은 겁니다.
useRef
import {useRef} from 'react';
컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.
ref 객체는 .current 라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
- 일반적으로 React에서 DOM element에 접근할 때 사용한다.
- useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링 되지 않는다.
04 Custom Hook만들기
- 컴포넌트 로직을 함수로 뽑아내어 재사용하기 쉽게 만드는 것
- 훅의 이름은 'use'로 시작해야 한다.
- 한 훅 내의 state는 공유되지 않는다.
