[React] Hooks: useState, useEffect, useReducer

React

[React] Hooks: useState, useEffect, useReducer

래모 2022. 5. 31. 21:51

// 리액트를 다루는 기술 8장 Hooks

Hooks란?

리액트의 기존 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 도와주는 기능!

useState나 useEffect등등을 알아보겠음

1️⃣ useState

가장 기본적인 Hook

가변적 상태를 지니게 해줌

const [value, setValue] = useState(0);

첫 번째 원소는 상태값, 두번째 원소는 상태를 설정하는 함수

useState안에는 첫 원소의 기본값을 넣어줌

즉 value를 처음엔 0으로 설정하겠다는 소리!

import React, { useState } from 'react';

const Counter = () => {
    const [value, setValue] = useState(0);

    return (
        <div>
            <p> 현재 counter 값은 <b>{value}</b></p>
            <button onClick = {() => setValue(value+1)}>+1</button>
            <button onClick = {() => setValue(value-1)}>-1</button>
        </div>
    )
};

export default Counter;

여러 개 사용하고 싶으면 여러 번 쓰면 됨

import React, {useState} from 'react';

const Info = () => {
    const [name, setName] = useState();
    const [age, setAge] = useState();

    const onChangeName = (e) => {
        setName(e.target.value);
    }
    const onChangeAge = (e) => {
        setAge(e.target.value);
    }

    return (
        <div>
            <input 
                placeholder='이름을 입력하세요'
                onChange = {onChangeName}
                value = {name}
            >
            </input>
            <input
                placeholder='나이를 입력하세요'
                onChange = {onChangeAge}
                value = {age}
            >
            </input>
            
            <p> 이름 : {name}</p>
            <p> 나이 : {age}</p>
        </div>
    )
}

export default Info;

2️⃣ useEffect

: 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

위의 Info 수정

import React, {useState, useEffect} from 'react';

const Info = () => {
    ...

    useEffect(() => {
        console.log('렌더링이 완료되었습니다!');
        console.log({name, age});
    });
    
    ...
}

export default Info;

이러면 값이 업데이트 될 때마다 useEffect가 실행된다.

특정 값이 업데이트될 때만 실행하고 싶다면 함수의 두 번째 파라미터로 배열을 넣어주면 됨

배열 안 에는 검사하고 싶은 값을 넣어줌!

import React, {useState, useEffect} from 'react';

const Info = () => {
    ...

    useEffect(() => {
        console.log(name)
    },[name]);
    
    ...
}

export default Info;

컴포넌트가 언마운트되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리 함수를 반환해야함

import React, {useState, useEffect} from 'react';

const Info = () => {
    ...

    useEffect(() => {
        console.log('effect');
        console.log(name);
        return () => {
            console.log('cleanup');
            console.log(name);
        }
    });
    
    ...
}

export default Info;

import React, {useState} from 'react';
import Counter from './Counter';
import Info from './Info';

const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button 
        onClick = {() => {
          setVisible(!visible);
        }}
      >
        {visible ? '숨기기' : '보이기'}
      </button>
      <hr/>
      {visible && <Info/>}
    </div>
  )

};

export default App;

이러면 컴포넌트가 나타날 때 effect가 나타나고 사라질때 cleanup이 나타남

~~근데 난 나타날 떄 effect, cleanup, effect 이렇게 세개가 같이 뜨고 사라질 땐 cleanup하나만 뜸....참나......뭐지....코드 똑같은데...~~

3️⃣ useReducer

: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook

전달 받는 것 : 현재 상태(state), 업데이트를 위해 필요한 정보를 담은 액션 값(action)

반환하는 것 : 새로운 상태

function reducer(state, action) {
    return { ... } ;// 불변성을 지키면서 업데이트한 새로운 상태를 반환
}

//액션 값은 주로 다음과 같은 형태
{
    type: 'INCREMENT',
    // 다른 값들이 필요하다면 추가
}

그럼 useReducer로 어떻게 action을 전달하냐?

➡ dispatch function을 통해 가능!

dispatch function은 state를 업데이트 되게 action을 dispatch함

useReducer의 첫 번째 파라미터에는 리듀서 함수를, 두 번째 파라미터에는 해당 리듀서의 기본값을 넣어줌

이를 기반으로 Counter 컴포넌트를 다시 구현하면 다음의 과정을 따름

초기 상태를 0으로 설정(value:0)
reducer함수를 작성. action type에 따라 더하고 빼고 상태를 리셋해줌
useReducer Hook 초기화
버튼에 dispatch함수 추가

import React, { useReducer } from 'react';

function reducer(state, action) {
    // action.type에 따라 다른 작업 수행
    switch(action.type) {
        case 'INCREMENT':
            return {value : state.value + 1};
        case 'DECREMENT':
            return {value : state.value -1};
        default:
            // 아무것도 해당되지 않을 때 기존 상태 반환
            return state;
    }
}

const Counter = () => {
    const [state, dispatch] = useReducer(reducer, {value:0});
    // dispatch는 액션을 발생시키는 함수 

    return (
        <div>
            <p>
                현재 카운터 값 <b>{state.value}</b>
            </p>
            <button onClick = {() => dispatch({type: 'INCREMENT'})}>+1</button>
            <button onClick = {() => dispatch({type: 'DECREMENT'})}>-1</button>
        </div>
    )
}
export default Counter;

장점 : 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다

이번에는 Info를 수정해줄 거임

기존에는 인풋이 여러개여서 useState를 여러 번 사용한 반면 useReducer를 사용하면 클래스형 컴포넌트와 유사하게(inpt 태그에 name값 할당하고 e.targe.name을 참조하여 setState를 해준 것 처럼) 작업 처리 가능

import React, {useReducer} from 'react';

function reducer(state, action) {
    return {
        ...state, // state값을 여기에 복사하고
        [action.name]: action.value // 값을 덮어씌움
    };
}

const Info = () => {
    const [state, dispatch] = useReducer(reducer, {
        name:'',
        age: ''
    });// state를 name, age로 정의
    
    const {name, age} = state; // 위에서 정의한 state값이 각각 name, age에 들어갔음
    
    const onChange = e => {
        dispatch(e.target);
    };

    return (
        <div>
            <input 
                name = "name"
                placeholder='이름을 입력하세요'
                onChange = {onChange}
                value = {name}
            >
            </input>
            <input
                name = "age"
                placeholder='나이를 입력하세요'
                onChange = {onChange}
                value = {age}
            >
            </input>
            
            <p> 이름 : {name}</p>
            <p> 나이 : {age}</p>
        </div>
    )

}

export default Info;

❔ [action.name] : action.value 의 의미?

onChage함수에서 reducer함수를 호출한 부분을 확인해보면 action 값을 e.target으로 지정했으므로 아래가 성립함

action.name == e.target.name
action.value == e.target.value

이로써 state값을 value로 변경할 수 있음!

[ 참고 블로그 ]

https://chanhuiseok.github.io/posts/react-11/

https://lo-victoria.com/a-look-at-react-hooks-usereducer

4️⃣ useMemo

: 함수 컴포넌트 내부에서 발생하는 연산 최적화시켜줌