[React] Hook

장윤희·2023년 3월 1일
0

React

목록 보기
2/3
post-thumbnail

React Hooks이란?

React 16.8버전에 새로 추가된 기능이다.
함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공함으로써 class component, render 등을 안해도 된다.

useState

함수형 컴포넌트에서 상태값을 관리한다. initialState(초기값)를 파라미터로 받고, statestate 변경할 setState함수를 반환한다.

import

import react, { useState } from 'react';

사용법

const [state, setState] = useState(초기값);

useState 함수의 파라미터에는 상태의 기본값
배열의 첫번째 원소는 상태값, 두번째 원소는 상태를 설정하는 함수
함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링된다

변수 재선언

setState(1); // state의 값을 1로 변경

state의 값을 변경하려면 setState함수를 불러서 인자에 변경 될 값을 넣어준다

* state를 직접 수정하지 않는 이유
state를 직접 수정하면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어났는데도 렌더링이 일어나지 않을 수 있다. 상태 변경을 추적하고 변경에 따라 구성 요소를 다시 렌더링 하려면 setState를 사용해야 한다.

useEffect

useEffect를 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.

import

import react, { useEffect } from 'react';

사용법

useEffect(()=>{
	console.log('콘솔입니다람쥐');
},[]);

첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)를 넣는다
만약 deps배열을 비우게 된다면, 컴포넌트가 처음 나타날때만 useEffect에 등혹한 함수가 호출된다
useEffect에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고 한다.
deps가 비어있는 경우네는 컴포넌트가 사라질 때 cleanup 함수가 호출된다

cleanup 함수

  • useEffect 안에서 return 할 때 실행 된다. (useEffcet의 뒷정리)
  • 만약 컴포넌트가 마운트 될 때 이벤트 리스너를 통해 이벤트를 추가하였다면 컴포넌트가 언마운트 될 때 이벤트를 삭제 해주어야 한다.
    그렇지 않으면 컴포넌트가 리렌더링 될 때마다 새로운 이벤트 리스너가 핸들러에 바인딩 될 것이다. 이는 자주 리렌더링 될 경우 메모리 누수가 발생할 수 있다.

컴포넌트가 마운트 됐을 때 (처음 나타났을 때)

useEffect(()=>{
	console.log('콘솔입니다람쥐');
});

처음 렌더링 될 때 한번만 실행하고 싶을때는 deps 위치에 빈 배열을 넣는다
cf) 배열을 생략한다면 리렌더링 될때마다 실행

업데이트 될 때 (특정 props가 바뀔 때)

useEffect(()=>{
	console.log('콘솔입니다람쥐');
}, [name]);

배열 안에 검사하고 싶은 값(관리하는 상태, props로 전달받은 값)을 넣어준다
cf) 업데이트뿐만 아니라 마운트 될때도 실행된다

업데이트때만 실행하고 싶으면 아래와 같이
마운트 될 때 if 문에서는 mounted값만 바꿔주고,
else에서 배열안에 있는 값이 바뀌면 원하는 코드 실행

const mounted = useRef(false);

useEffect(()=>{
	if(!mounted.current){
     mounted.current = true;
    }else{
    //원하는 코드
    }
}, [바뀌는 값]);

언마운트 됐을 때(사라질 때) & update 되기 직전에

useEffect(()=>{
	console.log('콘솔입니다람쥐');
    return ()=>{
    	console.log('celanup;);
    };
}, []);

cleanup 함수 반환

언마운트 될 때만 cleanup 함수를 실행하고 싶을 때
: 두번째 파라미터로 빈 배열을 넣는다
특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때
: deps 배열 안에 검사하고 싶은 값을 넣어준다

deps에 특정 값 넣기
deps에 특정값을 넣게 된다면 컴포넌트가 처음 마운트될 때, 지정한 값이 바뀔 때, 언마움트 될 때, 값이 바뀌기 직전에 모두 호출이 된다.

useEffect안에서 사용하는 상태나 props가 있다면, useEffect의 deps에 넣어주어야 하는것이 규칙이다
만약 사용하는 값을 넣어주지 않는다면 useEffect안의 함수가 실행될 때 최신 상태, props를 가리키지 않는다
deps파라미터를 생략한다면 컴포넌트가 리렌더링 될 때 마다 useEffect함수가 호출된다.

useReducer

상태를 관리할 때 사용하는 hook 함수로, useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
컴포넌트 바깥에 작성 할 수도 있고, 다른 파일에 작성 후 불러와서 사용 할 수도 있다.

import

import React, { useReducer } from 'react';

사용법

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

state는 컴포넌트에서 사용 할 수 있는 상태
dispatch 액션을 발생시키는 함수로, dispatch({type:'INCREMENT'})와 같이 안에 액션을 넣어 호출하면 된다.
첫번째 파라미터는 reducer 함수이고 두번째 파라미터는 초기상태이다

예시1. state가 간단한 숫자인 경우

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const onDecrease = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

예시2. state가 복잡한 객체인 경우

import React, { useRef, useReducer, useMemo, useCallback } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function countActiveUsers(users) {
  return users.filter(user => user.active).length;
}

const initialState = {
  inputs: {
    username: '',
    email: ''
  },
  users: [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]
};

function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_INPUT':
      return {
        ...state,
        inputs: {
          ...state.inputs,
          [action.name]: action.value
        }
      };
    case 'CREATE_USER':
      return {
        inputs: initialState.inputs,
        users: state.users.concat(action.user)
      };
    case 'TOGGLE_USER':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === action.id ? { ...user, active: !user.active } : user
        )
      };
    case 'REMOVE_USER':
      return {
        ...state,
        users: state.users.filter(user => user.id !== action.id)
      };
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const nextId = useRef(4);

  const { users } = state;
  const { username, email } = state.inputs;

  const onChange = useCallback(e => {
    const { name, value } = e.target;
    dispatch({
      type: 'CHANGE_INPUT',
      name,
      value
    });
  }, []);

  const onCreate = useCallback(() => {
    dispatch({
      type: 'CREATE_USER',
      user: {
        id: nextId.current,
        username,
        email
      }
    });
    nextId.current += 1;
  }, [username, email]);

  const onToggle = useCallback(id => {
    dispatch({
      type: 'TOGGLE_USER',
      id
    });
  }, []);

  const onRemove = useCallback(id => {
    dispatch({
      type: 'REMOVE_USER',
      id
    });
  }, []);

  const count = useMemo(() => countActiveUsers(users), [users]);
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />
      <div>활성사용자 수 : {count}</div>
    </>
  );
}

export default App;

reducer

현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.
reducer가 반환하는 값이 곧 컴포넌트가 지닐 새로운 상태이다.

사용법

function reducer(state,action){
	//새로운 상태를 만드는 로직
  	// const nextState = ...
  return nextState;
}

state : 현재 상태
action : 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용한다.

  • type 값을 대문자와 _로 구성한다는 관습이 존재
  • 예시
// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}
// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}
// input 값을 바꾸는 액션
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'tester@react.com'
}
// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

참고자료
https://xiubindev.tistory.com/100
https://react.vlpt.us/basic/20-useReducer.html

https://velog.io/@wiostz98kr/React-useReducer-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

profile
멋쟁이

0개의 댓글