[TIL] React Hooks / useState / Custom Hook

React Hooks

React Hooks란?

리액트 훅이란 클래스 컴포넌트에서만 이용할 수 있는 리액트의 특수한 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드들이다.

 

React Hooks 종류

리액트 훅은 매개변수가 1개인 것과 2개인 것으로 나눌 수 있다.

매개변수 개수	훅 함수
1개	useState, useRef, useImperativeHandle, useContext
2개	useMemo, useCallback, useReducer, useEffect, useLayoutEffect

 

매개 변수가 1개인 훅 메서드들은 아래와 같은 코드 패턴을 공통으로 사용한다.

훅_메서드(값)

 

매개 변수가 2개인 훅 메서드들은 아래와 같은 코드 패턴을 공통으로 사용한다.

훅_메서드(콜백_함수, 의존성_목록)

 

React Hooks의 특징

1. 이름 앞에 use라는 접두사가 붙는다.
2. 같은 리액트 훅을 여러 번 호출할 수 있다.
3. 함수 컴포넌트 내부에서만 호출할 수 있다.
4. 조건문, 반복문, 중첩된 함수 내에서 호출할 수 없다.
5. 비동기 함수를 콜백 함수로 사용할 수 없다.

 

useState

state란?

state는 컴포넌트의 현재 상태를 보관하는 변수다.

 

state를 갖는 컴포넌트는 해당 state의 값에 따라서 각각 다른 UI를 화면에 렌더링하게 된다.

 

리액트에서는 각각의 컴포넌트의 상태를 의미하는 값이자 변화할 수 있는 값인 state를 만들 수 있으며 하나의 컴포넌트에 여러 개의 state를 만드는 것도 가능하다.

 

 

state 생성

state를 생성하려면 useState라는 메서드를 사용해야 한다.

 

useState는 두 개의 요소가 들어있는 배열을 반환하는데 첫 번째 요소는 현재 state의 값이고 두 번째 요소는 state를 변화시키는 함수다.

 

const [state, setState] = useState()

 

컴포넌트 내에 새로운 state를 생성하고 state의 값을 변경하면 리액트가 내부적으로 컴포넌트의 state가 변경되었다는 것을 감지해서 해당 컴포넌트를 리렌더링 시켜준다.

 

Custom Hook

리액트 훅은 여러 훅 함수를 조합해 마치 새로운 훅 함수가 있는 것처럼 만들 수 있는데 이렇게 조합한 새로운 훅 함수를 커스텀 훅이라고 한다.

 

커스텀 훅은 훅이라는 의미를 강조하고자 함수 이름에 ‘use’라는 접두어를 붙여서 만든다.

 

function useInput() {
  const [input, setInput] = useState("");

  const onChange = (e) => {
    setInput(e.target.value);
  };

  return [input, onChange];
}

 

 

출처 : 한 입 크기로 잘라먹는 React