Hook

2022-06-17

Hook

React v16.8 부터 지원

함수형 컴포넌틑 선호하는 이유

클래스형 컴포넌트보다 선언하기 쉽다.
메모리 자원을 덜 사용한다.

함수 컴포넌트에서 React의 state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.

Hook 규칙

1. 제일 위에서만 Hook을 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서는 Hook을 호출해선 안된다.

2. React 함수 내에서만 Hook을 호출해야 한다.

Custom Hook에서는 호출 가능하지만 일반적인 JS 함수에서는 호출해선 안된다.

3. Hook을 만들 때 앞에 use를 붙힌다.

한눈에 Hook 규칙이 적용되었는지 파악할 수 있다.

4. React는 Hook 호출되는 순서에 의존한다.

한 컴포넌트에서 여러 개의 Hook이 사용되는 경우 위에서 아래로 순서에 맞게 동작한다.

useState

컴포넌트에 state 값을 추가할 때 사용한다.

const [state, setState] = useState(initialState);
const [ 데이터, 데이터변경함수 ] = useState(초기값(생략가능));

useState의 파라미터는 state의 초기값이다.

useState 함수의 return 값은 만들어진 state 배열이며 첫번째 인덱스는 state 변수이고 두번째 인덱스는 state의 setter이다.

useState 함수는 하나의 상태값만 관리하기 때문에 여러 개의 state일 경우 여러 번 선언해야 한다.

import React, { useState } from "react";

function sigleState() {
  const [count, setCount] = useState(0);
};

function multiState() {
	const [x, SetX] = useState(0);
	const [y, SetY] = useState(0);
	const [z, SetZ] = useState(0);
	
	const addX = () => {
    SetX(x + 1);
  };
  const addY = () => {
    SatY(y + 1);
  };
  const addZ = () => {
    SetZ(z + 1);
  };

  return (
    <div>
      <div> {x}, {y}, {z} </div>
      <button onClick={addX}>add X</button>
      <button onClick={addY}>add Y</button>
      <button onClick={addZ}>add Z</button>
    </div>
  );

}

useEffect

컴포넌트가 렌더링될 때 특정 작업을 실행시킬 때 사용한다.

componentDidMount, componentDidUpdate, componentWillUnmount을 대처한다.

import react, { useEffect } from "react";
useEffect(effect, [, deps]);

useEffect의 첫번째 파라미터로 렌더링 이후 실행할 함수이다.

두번째 파라미터는 배열로 입력한 값에 따라서 componentDidMount, componentDidUpdate, componentWillUnmount를 실행한다.

componentDidMount & componentDidUpdate

두번째 파라미터 값이 없을 경우 mounted, updated 때 실행된다.

useEffect(() => {
  console.log("useEffect!!", count);
});

componentDidMount

두번째 파라미터가 빈 배열인 경우 mounted 때 실행된다.

useEffect(() => {
  console.log("useEffect!!", count);
}, []);

componentDidUpdate

두번째 파라미터가 값을 가진 배열인 경우 updated 때 실행된다.

useEffect(() => {
  console.log("useEffect!!", count);
}, [count]);

componentWillUnmount

첫번째 파라미터가 return이 있는 경우 unmount 때 실행된다.

return의 함수가 unmount 시 실행될 함수이다.

useEffect(() => {
  console.log("useEffect!!", count);

  return () => {
    // clean up
    console.log("cleanup!!", count);
  }
}, [count]);

useContext

여러 컴포넌트에게 데이터를 전달할 때 사용한다.

Vue에서 provide, inject과 같다.

useContext를 사용하지 않으면 App 에서 사용하고 있는 stateA 값을 GrandChild까지 전달하기 위해 props로 아래와 같은 구조로 값을 넘겨야 한다.

useContext 구조

createContent: context 객체를 생성한다.
Provider: 하위 컴포넌트에게 전달한다.

import React, { useContext } from "react";
import { AppContext } from "./App";

const Children = () => {
  // useContext를 이용해서 따로 불러온다.
  const user = useContext(AppContext);
  return (
    <>
      <h3>AppContext에 존재하는 값의 name은 {user.name}입니다.</h3>
      <h3>AppContext에 존재하는 값의 job은 {user.job}입니다.</h3>
    </>
  );
};

// App.js

import React, { createContext } from "react";
import Children from "./Children";

export const AppContext = createContext();

export default function App() => {
  const user = {
    name: "김채원",
    job: "가수"
  };

  return (
    <>
      <AppContext.Provider value={user}>
        <div>
          <Children />
        </div>
      </AppContext.Provider>
    </>
  );
};

// Children.js

import React, { useContext } from "react";
import { AppContext } from "./App";

const Children = () => {
  const user = useContext(AppContext);
  return (
    <>
      <h3>AppContext에 존재하는 값의 name은 {user.name}입니다.</h3>
      <h3>AppContext에 존재하는 값의 job은 {user.job}입니다.</h3>
    </>
  );
};