📝 오늘 한 것

1. react effects

📚 배운 것

새롭게 알게 된 내용이거나 이해하기 어려웠던 부분만 정리

1. Using the Effect Hook

코드는 Using the Effect Hook 페이지 참고
2) & 3)은 [TIL] 220125도 함께 참고

1) side effect란?

프로그래밍에서 side effect(또는 effect)란, 어떤 함수가 함수 외부의 정보와 영향을 주고 받는 일을 말한다.
예를 들어, React에서 함수 컴포넌트는 때론 UI에 그려줄 데이터를 외부에서 가져와야 할 수도 있는데, 이 경우 서버와 교류하는 네트워크 요청을 side effect라고 할 수 있다.

그런데 이러한 요청은 처음 한 번만 필요하고 함수 컴포넌트가 렌더링 될 때마다 요청할 필요는 없는 경우가 많다.
useEffect()를 사용하면 함수 컴포넌트에서 이 같은 side effect를 효율적으로 수행할 수 있다.

데이터 가져오기 외에도 구독(subscription) 설정하 그리고 위에서 살펴본 수동으로 React 컴포넌트의 DOM 수정하기 또한 side effect에 해당한다.

2) 정리(clean-up)를 이용하지 않는 effects

side effect 중에서 네트워크 요청, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요없다.

• React class 사용

render 메서드 그 자체는 side effect를 발생시키지 않는다.
side effect는 React가 DOM을 업데이트 한 후에 수행된다.
React class에서 side effect는 componentDidMount와 componentDidUpdate에서 수행된다.

React class 안에서 2개의 생명주기 메서드에 같은 코드가 반복되는데, 이를 개선할 방법이 없기 때문에 중복 코드를 사용해야 한다.

• useEffect() 사용

React class에서와 마찬가지로 side effect가 수행되는 시점에 이미 DOM이 업데이트 되었음을 보장한다.
useEffect()가 첫 번째 인자로 받는 함수를 'effect'라고 부른다.
React는 컴포넌트 렌더링 시 이 함수를 기억했다가 DOM 업데이트까지 끝난 후에 이 함수를 불러낸다.

effect 함수는 (두 번째 인자 없이 사용하면) 기본적으로 첫 번째 렌더링을 비롯해 이후의 모든 컴포넌트 업데이트 시에 실행된다.
React class에서와 달리 이를 나눠 작성하지 않아도 되기 때문에 중복 코드를 사용할 필요가 없다.

3) 정리(clean-up)를 이용하는 effects

side effect 중에서 구독을 설정하는 것(ex.이벤트 구독 등)은 메모리 누수를 방지하기 위해 정리(clean-up)를 필요로 한다.

• React class 사용

React class에서 side effect는 componentDidMount와 componentDidUpdate에서 수행되고, componentWillUnmount에서 정리(clean-up)된다.

그런데 이와 같은 생명주기 메서드들은 개념상 똑같은 effect 코드를 가지고 있음에도 React class에서는 매번 중복으로 작성해야만 한다.

• useEffect() 사용

useEffect()의 첫 번째 인자인 effect 함수가 cleanup 함수를 return 하도록 작성하면 컴포넌트가 마운트 해제되어 정리가 필요할 때 cleanup 함수가 실행된다.
cleanup 함수로는 유명함수든 익명함수든 화살표 함수든 상관없다.

2. Hooks API Reference

1) Hook 자주 묻는 질문

(1) 종속성 목록에서 함수 컴포넌트를 생략하는 것이 안전합니까?

• 함수 컴포넌트 (또는 함수 컴포넌트가 호출하는 함수 컴포넌트)가 props, state 또는 파생된 값을 참조하지 않는 경우에는

  종속성 목록에서 함수 컴포넌트를 생략해도 안전하다.

function Example() {
  // ~를 참조하지 않는 함수 컴포넌트는 effect 외부에 선언해도 ok
  function doSomething() {
    console.log('hello');
  }

  useEffect(() => {
    doSomething();
  }, []); // 종속성 목록에서 함수 컴포넌트 생략 ok
}

function Example() {
  useEffect(() => {
    // ~를 참조하지 않는 함수 컴포넌트는 effect 내부에 선언해도 ok
    function doSomething() {
      console.log('hello');
    }

    doSomething();
  }, []); // 종속성 목록에서 함수 컴포넌트 생략 ok
}

• 함수 컴포넌트 (또는 함수 컴포넌트가 호출하는 함수 컴포넌트)가 props, state 또는 파생된 값을 참조하는 경우에는

  • 그 함수 컴포넌트를 effect 내부에 선언하고 참조하는 props 또는 state를 종속성 배열에 추가해야 한다.

  • 만약 어떤 이유로 함수 컴포넌트를 effect 내부로 이동할 수 없고 effect 외부에 두어야 한다면, useEffect() 종속성 목록에 해당 함수 컴포넌트를 추가하되(생략 X), effect 외부에 위치한 그것의 정의 부분은 useCallback()으로 감싸야 한다.

function ProductPage({ productId }) {
  // effect 외부에 위치한 함수 컴포넌트의 정의 부분을 useCallback()으로 감싼다
  // 'props를 참조하는' 함수 컴포넌트가 effect '외부'에 위치해 있으므로
  const fetchProduct = useCallback(() => {
    // ...
  }, [productId]);

  return <ProductDetails fetchProduct={fetchProduct} />;
}

function ProductDetails({ fetchProduct }) {
  useEffect(() => {
    fetchProduct();
  }, [fetchProduct]); // 해당 함수 컴포넌트를 useEffect() 종속성 목록에서 생략해선 안된다
  // ...
}

이렇게 하면 ProductPage에서 productId prop이 변경되면
ProductDetails 컴포넌트에서 자동으로 다시 가져오기가 트리거 된다.(fetchProduct 함수 실행)

(2) effect 종속성이 너무 자주 변경되면 어떻게 해야 합니까?

function Counter() {
  const [count, setCount] = useState(0);

  // console.log(count); // 처음 렌더링 시 0, 그 이후로 계속 1
  
  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // effect가 count state에 의존함에도 불구하고
    }, 1000);

    return () => clearInterval(id);
  }, []); // 종속성 목록에 count를 생략했다 => 버그 ❗

  return <h1>{count}</h1>;
}

ReactDOM.render(<Counter />, document.getElementById("root"));

외부 함수인 Counter 함수의 count state는 내부 함수인 setInterval의 콜백 함수에서 참조하고 있기 때문에 클로저를 형성하게 된다.
결국 1초가 지날 때마다 setCount(count + 1) 실행 시 클로저로 인해 매번 count state의 초깃값 0을 가져오게 되어 결과적으로 count의 값을 1로 바꿀 뿐이고, 몇 초가 지나더라도 count의 값이 그 이상을 초과할 수는 없다.

버그를 해결하기 위해 종속성 목록에 count state를 추가할 수 있다.
그런데 그렇게 되면 count state의 값이 매초마다 변하기는 하지만, 이는 사실 제대로 코드를 작성했다면 setInterval을 한 번만 호출하면 되는 것을, 매초마다 count state가 바뀜에 따라 setInterval을 다시 호출하게 되어 바람직하지 않다.

가장 최선의 방법은 setState 함수의 인자로 '콜백 함수'를 넣어주는 것이다.

function Counter() {
  const [count, setCount] = useState(0);

  // console.log(count); // 0, 1, 2, 3... 정상적으로 업데이트가 된다
  
  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1); // 📌  effect가 count state에 의존 X, 이전 state를 바탕으로 새로운 state를 도출
    }, 1000);

    return () => clearInterval(id);
  }, []); // 종속성 목록에 count 생략 => setInterval은 처음 렌더링 시 1번만 호출됨

  return <h1>{count}</h1>;
}

ReactDOM.render(<Counter />, document.getElementById("root"));

2) useReducer

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

useReducer의 첫 번째 인자는 (state, action) => newState의 형태를 가지는 reducer 함수이다.

이때 reducer 함수의 두 번째 인자인 action은 업데이트를 위한 정보를 가지는 객체이다.
dispatch는 액션을 발생시키는 함수로써, reducer 함수는 dispatch 함수가 발생시킨 액션에 따라 state를 반환한다.
reducer 함수가 반환하는 새로운 state가 곧 컴포넌트에서 사용될 state가 된다.

useReducer의 두 번째 인자는 state의 초깃값을 받는다.

useReducer의 세 번째 인자는 초깃값을 설정하는 함수를 받는다.
이는 나중에 state를 재설정 하는 데도 사용할 수 있다.

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

3) useEffect

(1) effect 타이밍

componentDidMount와 componentDidUpdate와는 달리 useEffect()로 전달된 함수, 즉 effect 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후에 발생한다.
이는 구독이나 이벤트 핸들러 설정 등의 side effect가 브라우저에서 화면을 업데이트하는 것을 차단해서는 안 되므로 대부분의 경우 바람직하다.

그러나, 사용자에게 노출되는 DOM 변경과 같은 side effect는 화면의 업데이트가 끝나기 전에 동기화가 완료되어야 한다.
이러한 side effect를 위해 useLayoutEffect()를 사용할 수 있다.

4) useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback은 메모이제이션된 콜백을 반환한다.

첫 번째 인자로는 콜백 함수를, 두 번째 인자로는 종속성 목록(의존성 값의 배열)을 받는다.

리렌더링 시에 종속성 목록이 변경되지 않는 한 메모이제이션된 콜백 또한 변경되지 않는다.

참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용하다. ( 여기 참고 )

✨ 내일 할 것

1. react data-flow