리액트 훅(useState, useEffect, useMemo, useCallback, useRef,

Hook이란?

- Hook: React 버전 16.8부터 리액트 요소로 새로 추가되었으며, 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있게 해주는 요소

- 훅이 존재하기 이전에는 상태 관련 로직이 하나로 묶이기 때문에 상태 로직을 재사용하는 것이 어려웠다. 여기에 훅을 도입하면서 상태 로직을 추상화하여 재사용이 가능하게 한다.

- Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 통해 컴포넌트 재사용이 가능하다. 

 

리액트 내장 훅 API

 

1. useState()

import React, {useState} from 'react';
const [state, setState] = useState(initialState);

- useState는 현재 state값과 state값을 업데이트하는 setState함수를 쌍으로 제공함

- initialValue는 첫 렌더링에서만 사용됨

2. useEffect()

import React, {useEffect} from 'react';
useEffect(callback, deps[])

callback

- 수행하고자하는작업

deps

- callback을 실행시킬 조건을 배열의 형태로 저장.

- 특정값을 넣게 되면 컴포넌트가 마운트될때, 지정한 값이 업데이트될 때 useEffect를 실행시킴

 

1) 컴포넌트가 마운트 될때

useEffect(()=>{
console.log("렌더링시 실행");
});

2) 컴포넌트가 props, state변경으로 업데이트 될때

useEffect(()=>{
console.log(state);
console.log("state가 업데이트 될 때 실행");
},[state]);

 

3. useCallback()

useCallback(
  () => {
    first
  },
  [second],
)

4. useMemo()

- 컴포넌트를 리렌더링 할 때, 변화가 없는 부분은 리렌더링 되지 않고, 이전에 연산된 값인 memorized value를 반환함. 

const Value = useMemo(callback, dependency[]);

5. useRef()

- 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 하는 API이며 리렌더링 되더라도 동일한 참조값을 유지하게 하기위한 API

const reference = useRef(initialValue);