[ React ] React Hook 💻 / useState, useEffect, UseReducer

React Hook?
React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리

• 같은 Hook을 여러번 호출할 수 있다.
• 비동기 함수(async 키워드가 붙은 함수)는 콜백함수로 사용할 수 없다.

💡 UseState

컴포넌트의 state(상태)를 관리 할 수 있다. React에서 사용자의 반응에 따라, 화면을 바꿔주기(렌더링) 위해 사용되는 트리거 역할을 하는 변수이다. React가 state를 감시하고, 바뀐 정보에 따른 화면을 표시해준다. setValue는 value의 바뀐 값을 담는다. useState는 컴포넌트에서 state값을 추가할 때 사용됨. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어준다. 하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있어 만약에 컴포넌트에서 관리해야할 상태가 여러 개라면 useState를 여러번 사용해야 한다.

export default function App(){
  const [value1, setValue1] = useState()
  const [value2, setValue2] = useState()
  return {
    <div>
      <div>{value1}</div>
      <div>{value2}</div>
    </div>
  }
}

//예시 2

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        // 클릭시 count +1
        Click me
      </button>
    </div>
  );
}

💡 UseEffect

useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다.

useEffect(function, deps)

• function : 실행하고자 하는 함수
• deps : 배열 형태. function을 실행시킬 조건.
• deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행

useEffect(() => {
    console.log("렌더링 될때마다 실행");
  });
useEffect(() => {
    console.log("맨 처음 렌더링될 때 한 번만 실행");
  },[]);
useEffect(() => {
    console.log(name);
    console.log("name이라는 값이 업데이트 될 때만 실행");
  },[name]);

💡 UseReducer

useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다. useState와 다른 점은 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 컴포넌트로부터 분리시키는 것을 가능하게 해준다.

여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있다.

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
  ...
});

useReducer 함수는 reducer 함수가 반환하는 값으로 state를 갱신하는 역할을 한다.

const [state, dispatch] = useReducer(reducer, initialState, init);

• state: 컴포넌트에서 사용할 State(상태).
• dispatch: reducer 함수를 실행시키며, 컴포넌트 내에서 state의 업데이트를 일으키기 위해서 사용하는 함수.
• reducer: 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수. 현재의 state와 action 객체를 인자로 받아서, 기존의 state를 대체할 새로운 State를 반환하는 함수
• initialState: 초기 State
• init: 초기 함수