[React/기술면접] Hook (2)

 React Hooks 

이제 더 다양한 Hook에 대해 살펴볼 것이다.

아직 Hook에 대해 익숙하지 않다면 아래 글을 먼저 읽고 오길 바란다.

 

https://valueengine.tistory.com/76

[React/기술면접] Hook (1)

 

728x90

 

 4. useReducer 

useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 useState 대신 사용하는 Hook이다.

여기서 알아둬야 할 개념에는 Reducer, Dispatch, Action이 있다. 만약 은행의 거래 내역이 state일 때, 출금(action)을 은행(reducer)에 요구(dispatch)하면 은행은 거래 내역 state를 업데이트 해준다.

 

 4-1. useReducer의 구성 

이것을 컴포넌트의 관점에서 정리하면 다음과 같다.

 

1) useReducer 함수

 

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

 

• dispatch : 컴포넌트 내에서 state의 업데이트를 발생시키기 위한 함수
• reducer : 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수
• initialState : 초기 state
• init : 초기 함수

import React, { useReducer } from 'react';

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

 

2) action

action은 업데이트를 위한 정보를 가지고 있는 것을 말한다.

dispatch의 인자가 되며, reducer 함수의 두 번째 인자에 할당된다.

action의 형태는 따로 정해져 있지 않으나, 아래의 코드처럼 주로 type이라는 값을 지닌 객체 형태로 사용된다.

dispatch({ type: "document" })

 

3) dispatch 함수

 

dispatch 함수는 reducer 함수를 실행시킨다. 이때 dispatch의 인자인 action이 reducer 함수의 두 번째 인자에 할당되며, 컴포넌트 내에서 state의 업데이트를 발생시키기 위해 사용된다.

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

  return (
    <>
      {/* 현재 카운트 값은 state인 number 객체의 count로부터 읽어옴 */}
      <h1>Count: {number.count}</h1>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

 

4) reducer 함수

 

reducer 함수는 컴포넌트 외부에서 state를 업데이트 하는 로직을 담당한다.

reducer 함수는 현재의 state와 action을 인자로 받으며, action의 값에 근거하여 기존의 state를 대체할 새로운 state를 반환해준다. 여기서 핵심은 기존의 state를 새로운 state로 대체(replace)한다는 것이다.

function reducer(state, action) {
  switch (action.type) {
    // action의 type이 "decrement"일 때, 현재 state에서 1을 뺀 값을 반환함
    case "decrement":
      return state - 1;
    // action의 type이 "increment"일 때, 현재 state에서 1을 더한 값을 반환함
    case "increment":
      return state + 1;
    // 정의되지 않은 action type이 넘어왔을 때는 에러를 발생시킴
    default:
      throw new Error("Unsupported action type:", action.type);
  }
}

 

---

 4-2. useReducer의 장점 

useReducer는 한 컴포넌트 내에서 "state를 업데이트 하는 로직"을 그 컴포넌트로부터 분리시키는 것을 가능하게 해준다.

 

useState를 사용하면 아래처럼 컴포넌트 내부에서 state를 업데이트 해준다.

 

 

그러나 useReducer는 state를 업데이트 하는 로직을 외부로 분리시키는 것이 가능하기에, 이 로직을 별도의 파일에서 작성해 가져오는 것도 가능하다. 이로 인해 컴포넌트의 최적화를 이룰 수 있다.

 

 

---

 5. useMemo 

useMemo는 컴포넌트의 성능을 최적화하는 Hooks 중 하나로, 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

여기서 Memo는 메모이제이션(Memoization)의 줄임말로, 기존에 수행하던 연산의 결과값을 메모리에 저장해서 필요할 때마다 동일한 값을 재활용하는 프로그래밍 기법을 말한다. 즉, 동일한 입력값이 들어올 때마다 중복 연산을 하지 않아 성능을 최적화할 수 있다.

 

useMemo는 첫 번째 인자로 콜백 함수를 받으며, 이때 콜백 함수는 메모이제이션 해야 할 값을 리턴해주는 함수다.

두 번째 인자로 의존성 배열(dependency array)을 받으며, 배열의 요소 값이 업데이트 될 때만 콜백 함수를 호출해 memoization 된 값을 업데이트해서 다시 memoization 해준다. 만약 빈 배열을 넘겨주면 맨 처음 컴포넌트가 마운트되었을 때만 값을 계산하고, 이후에는 항상 메모이제이션 된 값을 꺼내와서 사용한다.

 

import React, { useMemo } from 'react';

const value = useMemo(() => {
  return calculate();
}, [item]);

 

이렇게 좋아보이는 useMemo 역시 무분별하게 사용해서는 안 된다.

useMemo는 값을 재활용하기 위해 따로 메모리를 소비해서 저장해둔다. 따라서 불필요한 값까지 모두 memoization 해버리면 오히려 성능이 악화될 수 있기 때문에 꼭 필요할 때만 적절히 사용해야 한다.

 

---

 6. useCallback 

useCallback는 함수를 메모이제이션 하기 위해 사용되는 Hook이다.

첫 번째 인자로 메모이제이션 할 함수를 받으며, 두 번째 인자로 의존성 배열을 받는다. 이 배열 내에는 어떤 값이 바뀌었을 때 함수를 새로 생성해줘야 하는지 명시해줘야 한다. 만약 빈 배열을 넣어주면 컴포넌트가 렌더링될 때 만들어진 함수를 계속해서 재사용하게 된다.

import React, { useCallback } from 'react';

const memoizedCallback = useCallback(함수, 배열);

 

---

 7. useRef 

useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 Hook이다.

 

1) 저장공간

 

대표적인 저장공간인 State는 State가 변경될 때마다 리렌더링되면서 컴포넌트 내부 변수들이 모두 초기화된다. 그러나 Ref 내의 값은 아무리 바뀌어도 컴포넌트가 리렌더링되지 않는다. 즉, Ref를 사용하면 불필요한 렌더링을 막을 수 있으며, 컴포넌트가 아무리 렌더링되더라도 Ref 안에 저장된 값은 그대로 유지된다. 그래서 렌더링을 원치 않는 값을 다룰 때 유용하다.

 

• State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
  
  
• Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨
  
  
• State의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지됨

 

2) DOM 요소에 접근

 

ref를 통해 DOM 요소에 직접 접근하는 것이 가능하다.

예를 들어, 클릭을 하지 않아도 로그인 input 창이 포커스되어 있어서 바로 id를 입력할 수 있도록 해주는 것이다.

 

함수 컴포넌트에서 useRef를 부르면 ref object를 반환해준다. ref object는 { current: 초기값 }으로 이루어져 있다.

import React, { useRef } from 'react';

const ref = useRef(초기값);

 

ref에 대해 더 자세한 설명은 아래 링크를 참조하길 바란다.

https://valueengine.tistory.com/71

[React/기술면접] ref란?

 

반응형

 

---

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

---

References

 

• 도서 <리액트를 다루는 기술>
• https://ko.legacy.reactjs.org/docs/hooks-reference.html
• https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO
• https://velog.io/@iamhayoung/React-Hooks-useReducer%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0
• https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C