'react-redux 없이 직접 구현하기' 강의 중 궁금한 점이... - 인프런

실전 리액트 프로그래밍

'react-redux 없이 직접 구현하기' 강의 중 궁금한 점이 있어 질문합니다.

해결된 질문

작성

165

안녕하세요.

강의 'react-redux 없이 직접 구현하기'를 듣던 중 궁금한 점이 있어 질문하게 되었습니다.

강의에서 아래와 같은 코드를 작성하셨습니다.

const [, forceUpdate] = useReducer((v) => v + 1, 0);

설명하실 때 "상태값 변경 함수(forceUpdate)를 호출할 때마다. 상태값을 변경하는 코드이다. 이 함수(forceUpdate)가 호출될 때마다 컴포넌트를 렌더링하기 위해 작성했다."라고 말씀하셨습니다.

그런데 여기서 "컴포넌트를 다시 렌더링하는 것은 useState를 써도 되지 않을까?" 하는 생각이 들어 해당 라인에 useReducer를 useState로 바꿔서 실행해보니 오류는 발생하지 않았지만 timeline이 하나밖에 추가가 되지 않았습니다.

useReducer를 사용한다는 것은 redux에서 발생하는 모든 action들에 대해 감지를 한다는 뜻일까요? 위의 코드가 정확히 구체적으로 어떤 역할과 효과를 가져오는지 잘 모르겠습니다.

답변 주시면 감사하겠습니다.

redux react

답변 3

이재승

지식공유자

1. deps 에 빈 배열을 입력하면 한번만 실행되는 게 맞습니다
실제로 subscribe 함수는 한번만 실행될거에요
subscribe 에 입력된 함수는 그와 별개로 여러 번 실행될 수 있습니다

2. 혹시 `const [v, forceUpdate] = useReducer(...` 처럼 입력하고 그 밑에서 v 를 출력했다는 말씀이실까요?
맞다면 리액트 strict mode 가 켜진게 아닌가 의심되네요
참고로 리액트 strict mode 가 켜진 상태에서는 컴포넌트 렌더링이 두 번씩 발생합니다
index.js 쪽에 React.StrictMode 컴포넌트가 사용됐는지 봐주시겠어요?

이재승

지식공유자

안녕하세요
핵심은 `v => v + 1` 부분에 있습니다
forceUpdate 함수가 실행되면 항상 새로운 값으로 갱신되는 형태입니다
useState 를 사용했을 때는 상태값 변경 함수의 인수로 (수동으로) 새로운 값을 넣어줘야 하지만,
이렇게 useReducer 를 사용하면 인수를 입력하지 않아도 자동으로 갱신된다는 차이가 있습니다

taylous

질문자

답변 감사합니다.

그런데 아직 명확하지 않은 부분이 있어 다시 한 번 질문 해봅니다.

export default function TimelineMain() {
  const [, forceUpdate] = useReducer((v) => v + 1, 0);

  useEffect(() => {
    let prevTimelines = store.getState().timeline.timelines;
    const unsubscribe = store.subscribe(() => {
      const { timelines } = store.getState().timeline;
      if (prevTimelines !== timelines) {
        forceUpdate();
        prevTimelines = timelines;
      }
    });
    return () => unsubscribe();
  }, []);

📌 강의에서 쓰인 코드 일부를 가져왔습니다.

1️⃣ useEffect의 DependencyList를 빈 배열([])로 선언한 것은 해당 컴포넌트가 호출 되었을 때, 한 번만 실행한다는 뜻 아닌가요? 그럼에도 계속 실행이 된다는 것은, 추가버튼을 눌러 'TimelineList'가 추가되면, 하위 컴포넌트가 렌더링 되었기 때문에 상위 컴포넌트인 'TimelineMain'도 다시 렌더링 되면서 'v' 값이 계속 증가되는 로직 때문인가요?

2️⃣ 실행 과정이 궁금해서 'v' 값을 출력 해보았는데, 처음에 Timeline을 추가할 때나 Friend 추가 후 Timeline을 추가하면 'v'가 두 번 출력되던데 이 현상은 'store.getState()'의 변화를 감지하고 있기 때문에 그런건가요?

답변 주시면 정말 감사하겠습니다.

인프런 커뮤니티 질문&답변

'react-redux 없이 직접 구현하기' 강의 중 궁금한 점이 있어 질문합니다.