Hooks

React 공식 문서 Hooks 개요에 따르면 hooks란 다음과 같다.

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

다시 말해서 클래스형 컴포넌트와 달리 함수형 컴포넌트에서 할 수 없던 state와 lifecycle 관리가 가능해졌다.

왜 Hooks인가?

Hooks 소개에서는 hooks라는 개념을 도입한 이유에 대해 다음과 같이 설명한다.

1. Hooks allow you to reuse stateful logic without changing your component hierarchy.
2. Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)
3. Hooks let you use more of React’s features without classes.

각각 custom hooks, effect hooks, functions와 관련이 있는데 앞으로 각 개념들을 하나씩 경험해가면서 hooks의 장점을 느껴보고 싶다.

📢 직접 적용해본 것 위주로 하나씩 추가됩니다.

기본 Hooks

useState

const [state, setState] = useState(initialState);

state 값과 그 값을 갱신하는 setState 함수를 반환한다. 최초 렌더링 시 state 값은 initialState 값과 같다.
setState 함수는 갱신하고 싶은 새 값을 받아 컴포넌트가 리렌더링되도록 큐에 등록한다. 리렌더링 후 받는 state 값은 항상 최신 값을 유지한다.

useEffect

useEffect(didUpdate[, dependencies]);

어떤 effect를 발생시키는 함수를 인자로 받는다. 전달된 didUpdate 함수는 화면에 렌더링이 완료된 후 실행된다.

기본적으로 매번 렌더링이 완료된 후 함수가 실행되지만 조건부로 함수가 실행되도록 할 수 있다.
dependencies에 빈 배열 '[]' 을 전달하면 최초 렌더링시에만 함수가 실행되고, prop 또는 state를 담은 배열 '[prop1, prop2, ..., state1, state2]'을 전달하면 배열에 담긴 값이 변경될 경우에만 함수가 실행된다.

추가 Hooks

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

메모이제이션된 callback 함수를 반환한다.
useEffect와 마찬가지로 dependencies 배열에 담긴 값이 변경되었을 때만 함수가 갱신된다.
다시 말해서 함수를 메모리에 저장해 동일한 함수를 반복해서 생성하지 않도록 함으로써 불필요한 렌더링을 방지할 수 있다.

useRef

const refContainer = useRef(initialValue);

변경 가능한 ref 객체를 반환한다. 처음에는 .current 프로퍼티 값이 전달받은 initialValue 값으로 초기화된다.
매번 렌더링 시 동일한 ref 객체를 제공하며 DOM에 접근하기 위해 자주 사용된다.

읽어보면 좋은 글

• Hooks API Reference

잘못된 부분에 대한 지적은 언제든 환영합니다! 😉