[리액트] Hook

useState : 가변적인 상태를 지닐 수 있게 해줌

const [state,setState] = useState(0);

 - 함수가 호출되면 배열을 반환

- [ 상태 값, 상태를 설정하는 함수 ]

 

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

(마운트,언마운트, 업데이트시)

 

마운트 시에 하는 작업들

- props 로 받은 값을 컴포넌트의 로컬 상태로 설정

- 외부 API 요청(REST API 등)

- 라이브러리 사용 (D3 , Video.js 등...)

- setYnterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업예약

 

언마운트 시에 하는 작업들

 - setIntervla, setTimeout 을 사용하여 등록한 작업들 clear 하기(clearInterval, clearTimeout)

 - 라이브러리 인스턴스 제거

 

참고사항! 

리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링되면(바뀐 내용이 없을 지라도) 자식 컴포넌트 또한 리렌더링 된다.

 

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

 - 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action)값을 전달받아 새로운 상태를 반환하는 함수.

 - 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 함.

 - 리덕스와 달리, useReducer에서 사용하는 액션 객체는 반드시 type을 지고 있을 필요가 없음

   (객체가 아니라, 문자열이나 숫자여도 됨.)

 - 컴포넌트 업데이트 로직을 바깥으로 뺄 수 있음.

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 = () => {

//state:현재 가리키고 있는 상태
//dispatch:액션을 발생시키는 함수
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  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

 

import React, { useReducer } from 'react';

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: '',
    nickname: ''
  });

  const { name, nickname } = state;

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

  return (
    <div>
      <div>
        <input name='name' value={name} onChange={onChange} />
        <input name='nickname' value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름 :</b>{name}
        </div>
        <div>
          <b>닉네임 :</b>{nickname}
        </div>
      </div>
    </div>
  )
}

export default Info;

 

 

useMemo: 함수 컴포넌트 내부에서 발생하는 연산을 최적화.

- 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고,

- 원하는 값이 바뀌지 않았다면 이전에 연산했던 겨로가를 다시 사용하는 방식

- 성능최적화를 위하여, 연산된 값 재사용하기

- 특정 결과값을 재사용 할 때 사용

 

useRef : Ref객체를 만들고, 이 객체를 본인이 선택하고 싶은 DOM에 ref 값으로 설정.

- .current로 실제 엘리먼트를 가져올 수 있음.

 

useCallback : 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용

- 첫 번째 파라미터 : 생성하고 싶은 함수, 두 번째 파라미터 : 배열

- 함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 함.

만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없음. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야 함.

 

React.memo를 사용한 컴포넌트 리렌더링 방지

- 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 성능 최적화를 해줄수 있음.

- 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정할 수 있음.

 

*리액트 개발할 때,

-useCallback, useMemo, React.memo 는 컴포넌트의 성능을 실제로 개선할수있는 상황에서만하기

 

useReducer

//state :  앞으로 컴포넌트에서 사용 할 수 있는 상태
//diapatch : 액션을 발생시키는 함수.
const [state, dispatch] = useReducer(reducer, initialState);

-컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음

- 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있음.

- reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

//type 값을 지닌 객체 형태로 사용
//action : 업데이트를  위한 정보를 지님
function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

useReducer VS useState 

- 컴포넌트에서 관리하는 값이 딱 하나이고, 그 값이 단순한 숫자, 문자열 혹은 불리언 값이라면 useState가 편할 것.

- 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면, useReducer로 관리하는 것이 편해질 수 도 있다.

- 자주 사용하고 마음에 드는 것으로 사용.

 

출처

https://react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook