[React] 리액트 기술 면접 핸드북 IV - 컴포넌트 라이프 사이클, Hooks etc.

1. 컴포넌트의 라이프 사이클 메서드
2. Hooks의 종류
3. useMemo vs. useCallBack
4. setState는 비동기

---

1. 컴포넌트의 라이프 사이클 메서드 ⭐️⭐️

- will~ 메서드: 어떤 작업을 작동하기 전에 실행되는 메서드
- Did~ 메서드: 어떤 작업을 작동한 후에 실행되는 메서드

• 메서드는 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있음
• 라이프사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눔
  
  
• 마운트 ⭐️
  
  • DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 함
  • componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
• 업데이트 ⭐️
  • 컴포넌트는 다음과 같은 네 가지 경우 업데이트
    • Props가 바뀔 때
    • state가 바뀔 때
    • 부모 컴포넌트가 리렌더링될 때
    • this.forceUpdate로 강제로 렌더링을 트리거할 때
  • componentDidUpdate: 컴포넌트의 업데이트(리렌더링) 작업이 끝난 후 호출하는 메서드
• 언마운트 ⭐️
  • 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것
  • componentWillUnmount: 컴포넌트가 웹 브라우저에서 사라지기 전에 호출하는 메서드

 

2. Hooks의 종류 ⭐️⭐️

• Hooks는 리액트 버전 16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌
  
  
• useState
  • 가장 기본적인 Hook, 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수
  • 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링 됨

import { useState } from 'react';

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

/* useState 내부의 모습을 구현한 모습 */

const MyReact = (function () {
  const global = {};
  let index = 0;

  function useState(initialState) {
    if (!global.states) {
      // 애플리케이션 전체의 states 배열을 초기화한다.
      // 최초 접근이라면 빈 배열로 초기화한다.
      global.states = [];
    }

    // states 정보를 조회해서 현재 상태값이 있는지 확인하고 없다면 초깃값으로 설정한다.
    const currentState = global.states[index] || initialState;
    // states의 값을 위에서 조회한 현재 값으로 업데이트한다.
    global.states[index] = currentState;

    // 즉시 실행 함수로 setter를 만든다.
    const setState = (function () {
      // 현재 index를 클로저로 가둬놔서 이후에도 계속해서 동인한 index에 접근할 수 있도록 한다.
      let currentIndex = index;
      return function (value) {
        global.states[currentIndex] = value;
        // 컴포넌트를 렌더링한다. 실제로 컴포넌트를 렌더링하는 코드는 생략했다.
      };
    })();

    /**
     * useState를 쓸 때마다 index를 하나씩 추가한다. 이 index는 setState에서 사용된다.
     * 즉, 하나의 state마다 index가 할당돼 있어 그 index가 배열의 값(global.states)을 가리키고 필요할 때마다 그 값을 가져오게 한다.
     **/

    index = index + 1;

    return [currentState, setState];
  }

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

    //...
    return <div>{value}</div>;
  }
})();

 

• useEffect
  • 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
  • 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방
  • useEffect는 기본적으로 렌더링되고난 직후마다 실행되며 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐
  • 컴포넌트가 언마운트 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해 주어야 함

/* 마운트만 실행시키고 싶은 경우: 두 번째 파라미터로 비어있는 배열을 넣어주면 됨 */
useEffect(() => {
  console.log('마운트될 때만 실행됩니다.');
}, []);


/* 특정 값이 업데이트될 때만 실행하고 싶은 경우: 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됨 */
useEffect(() => {
  console.log(name);
}, [name]);


/* 뒷정리(cleanup)코드 */
useEffect(() => {
    console.log("렌더링이 완료되었습니다!");
    console.log("none clean up: ", { name, nickname });
    return () => {
      console.log("clean up!");
      console.log("clean up name: ", { name });
    };
  }

 

• useReducer
  • useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook
  • 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태에 반환하는 함수
  • 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜줘야 함
    
    
  • 즉, 복잡한 형태의 state를 사전에 정의된 dispatcher로만 수정할 수 있게 만들어 줌으로써 state 값에 대한 접근은 컴포넌트에서만 가능하게 하고, 이를 업데이트하는 방법에 대한 상세 정의는 컴포넌트 밖에 둔 다음, state의 업데이트를 미리 정의해 둔 dispatcher로만 제한하는 것
  • state의 값을 변경하는 시나리오를 제한적으로 두고 이에 대한 변경을 빠르게 확인할 수 있게끔 하는 것이 목적!

type State = {
  count: number,
};

type Action = { type: 'up' | 'down' | 'reset', payload?: State };

function init(count: State): State {
  return count;
}

const initialState: State = { count: 0 };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'up':
      return { count: state.count + 1 };
    case 'down':
      return { count: state.count - 1 };
    case 'reset':
      return init(action.payload || { count: 0 });
    default:
      throw new Error(`Unexpected action type ${action.type}`);
  }
}

export default function App() {
  const [state, dispatcher] = useReducer(reducer, initialState, init);

  function handleUpButtonClick() {
    dispatcher({ type: 'up' });
  }

  function handleDownButtonClick() {
    dispatcher({ type: 'down' });
  }

  function handleResetButtonClick() {
    dispatcher({ type: 'reset', payload: { count: 1 } });
  }

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={handleDownButtonClick}>+</button>
      <button onClick={handleDownButtonClick}>-</button>
      <button onClick={handleResetButtonClick}>reset</button>
    </div>
  );
}

 

• useMemo
  • 함수 컴포넌트 내부에서 발생하는 연산 최적화
  • 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았더면 이전에 연산했던 결과를 다시 사용하는 방식

import React, { useCallback, useMemo, useRef, useState } from 'react';

const getAverage = (numbers) => {
  console.log('평균값 계산 중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');
  const inputEl = useRef();

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성

  const onInsert = useCallback(
    (e) => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
      inputEl.current.focus();
    },
    [number, list] // number 혹은 list가 바뀌었을 때만 함수 생성
  );

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

 

• useCallback
  • useMemo와 상당히 비슷한 함수로 만들어놨던 함수를 재사용할 수 있음
  • 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣음, 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 함
  • 주로 렌더링 성능을 최적화 해야하는 상황에서 사용

const onChange = useCallback((e) => {
  setNumber(e.target.value);
}, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성


const onInsert = useCallback(
  (e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  },
  [number, list] // number 혹은 list가 바뀌었을 때만 함수 생성
  /* 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 함 */
);


useMemo(() => {
  const fn = () => {
    console.log(‘hello world!‘);
  };
  return fn;
}, [])

 

• useRef
  • 바닐라 자바스크립트에서 DOM 요소를 조작하기 위해 querySelector나 getElementById 등을 사용했다면, 리액트에서는 useRef 훅 함수를 사용함
  • .current 프로퍼티에 변경 가능한 값을 담고 있는 객체임
  • .current 프로퍼티를 변경하더라도 리렌더링을 유발하지 않음. ref 객체 안의 값은 리액트 생명주기에 독립적이기 때문

import React, { useRef, Component } from 'react';

class RefSample extends Component {
  input = useRef();

  handleFocus = () => {
    this.input.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={input} />
      </div>
    );
  }
}

export default RefSample;

• Q) 언제 useState 대신 useRef를 사용할 수 있나요?
• A) useRef는 구성요소가 변경될 때 재렌더를 트리거하지 않아야 하는 값을 저장해야 할 때 사용해야 함. 반면, useState는 구성 요소가 변경될 때 다시 렌더링을 트리거해야 하는 값을 저장해야 할 때 사용.
  
  따라서 화면의 일부 내용을 표시하지 않는 경우, 렌더링에 영향을 받지 않앙도 되는 경우에 useRef를 사용한다면 리렌더링을 조금 더 효율적으로 핸들링 할 수 있음.

 

3. useMemo vs. useCallBack ⭐️⭐️

• useMemo 함수는 메모이제이션된 값을 반환
• useCallBack 함수는 메모이제이션된 함수를 반환
  • Memoization(메모이제이션): 프로그램 실행 시 이전에 계산한 값을 저장함. 원하지 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용 
• 컴포넌트는 다음과 같은 경우 리렌더링 되는데,
  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
• 이런 특정 상황(값, 또는 함수가 변경될 때)에 맞게 리렌더링이 될 수 있도록 useMemo와 useCallBack 함수를 사용함
  
  
• 의존성 배열로 어떤 값에 의해 바뀌는 지 확인하기 위해서는 해당 함수의 두 번째 콜백인 [] 배열 내부의 값을 보면 됨

// useMemo
const avg = useMemo(() => getAverage(list), [list]); // list 라는 값이 변결될 때'만' getAverage 함수를 재 호출하는 용도입니다

// useCallback
const onInsert = useCallback(
  (e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  },
  [number, list] // number 혹은 list가 바뀌었을 때만 onInsert 함수 생성
);

// useMemo
<div>
  <b>평균값:</b> {avg}
</div>

// useCallback
<button onClick={onInsert}>등록</button>

• Q) useCallBack을 사용할 때와 사용하지 않고 함수를 선언할 때는 어떤 차이가 있나요?
• A) useCallBack 훅함수는 메모이제이션을 할 수 있도록 허용하는 리액트의 훅임. 즉, 종속성 중 하나가 변경된 경우에만 함수가 다시 생성됨. 이 기능은 구성 요소가 자주 렌더링되고 해당 기능을 재생성하는 데 비용이 많이 드는 상황에서 성능 최적화에 유용할 수 있음.
  
  이와 반대로 useCallBack을 사용하지 않고 함수를 선언하는 경우 매 렌더링마다 함수를 새롭게 선언함
  
  함수 초기화(선언, initialize) 기능과 함께 'useCallBack' 함수를 사용할지 여부는 애플리케이션의 특정 요구에 따라 달라짐
  
  기능이 비교적 간단하고 재현 비용이 많이 들지 않는다면 'useCallback'을 사용할 필요가 없을 수도 있음
  그러나 함수를 다시 만드는 것이 더 복잡하거나 비용이 많이 드는 경우에는 이 함수와 함께 'useCallBack'을 사용하면 응용 프로그램의 성능을 향상시키는 데 도움이 될 수 있음

 

4. 리액트에서 setState는 동기인가 비동기인가 ⭐️

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

  useEffect(()=>{
    console.log('in useEffect:', count)
  },[count])

  const onClickButton = () => {
    console.log("before", count);

    setCount(count + 1);
    // setCount(prev => prev+1);

    console.log("after", count);
  };

  return <button onClick={onClickButton}>{count}</button>;
}

>>>
/*
  before 0
  after 0
  in useEffect 1
*/

• state 값을 갱신하는 함수인 setState는 비동기로 동작하는 훅 함수임
• 불필요한 리렌더링의 발생을 대비하기 위해 리액트는 setState를 비동기 함수로 처리해 컴포넌트 내의 비동기 함수를 처리하는 콜백큐가 다 비워지면 리렌더링하도록 설계
• 즉, 해당 함수 내에서 동기적으로 실행되는 함수가 모두 실행된 뒤에 마지막에 setState를 처리

const onClickButton = () => {
  console.log('before', count); // ----> 동기함수

  setCount(count + 1); // ---->  비동기함수

  console.log('after', count); // ---->  동기함수
};

• Q) setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은? ⭐️
• A) setState가 비동기 동작을 취함으로써 자바스크립트 내의 실행컨텍스트 스택이 돌아갈 때 동기적으로 실행되는 함수들을 모두 동작한 뒤에 큐에 존재하는 비동기적인 함수들을 이벤트 루프에 의해 꺼내와서 실행시킴.
  
  setState가 동기적으로 실행된다면, 한 컴포넌트 내부에 존재하는 함수에 의해 state 값이 연속적으로 변경될 경우 리액트의 컴포넌트 리렌더링 조건에 의해 지속적으로 리렌더링이 될 것임.