posts/a-complete-guide-to-useeffect-ko

[utterances-bot]

[번역] useEffect 완벽 가이드 | rinae's devlog

Dan Abramov의 'A Complete Guide to useEffect 번역'

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko

[jerrynim]

번역감사합니다. 나이트모드의 스크롤색상까지 바뀌는 디테일에 감동쓰했습니다 ㅋㅋ

[close852]

정말 정말 큰 도움이 되었습니다.

감사합니다!

[wnghdcjfe]

안녕하세요. 좋은 글 감사합니다. 질문이 있어서 ㅎㅎ 답변 부탁드립니다!

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

  function reducer(state, action) {
    if (action.type === 'tick') {
      return state + step;
    } else {
      throw new Error();
    }
  }

  useEffect(() => {
    const id = setInterval(() => {
      dispatch({ type: 'tick' });
    }, 1000);
    return () => clearInterval(id);
  }, [dispatch]);

위같은 코드에서 useEffect - dispatch를 넣는 이유는 dispatch가 발동할 때 rerun하게 만든다. 저 [] 안에는 변경되어야 할 변수를 넣는 것이며 dispatch라는 함수가 그 안에 있는 종속적인 변수가 변경되었을 때 변수가 바뀐 상태로 다시 호출되는 것. 즉, 함수가 변화하는 것이기 때문에 저기에 넣는 것이다. 로 생각해도 될까요?

[adhrinae]

@wnghdcjfe 인용하신 코드는 props 의 변화를 리듀서에 반영하고 싶을 때 사용하는 일종의 변칙적인 패턴입니다. 본문에서는 리액트 자체의 최적화를 무효화하는 코드라서 굉장히 특수한 경우에만 사용하라고 하고 있죠. 그래서 저 부분의 코드는 크게 신경 안쓰셔도 된다는 말씀을 먼저 드리고 싶고요.

useEffect 안에 dispatch 가 들어간 이유는 복잡하게 생각하실 것 없이 단 하나입니다. 이펙트 함수 안에서 dispatch 를 가져다 쓰고 있기 때문입니다.
저 상태에서도 dispatch 는 한번 선언되고 나서 바뀌지 않기 때문에 원래는 빈 배열을 넣어도 잘 동작합니다. 하지만 기본적으로 이 글을 통틀어 권장하는 방법이 "이펙트 바깥의 스코프에 있음에도 이펙트 안에서 사용하는 변수는 의존성 배열에 등록해두라" 이기 때문에 예제 코드에서는 dispatch 가 있을 뿐입니다.

나머지는 본문은 찬찬히 다시 읽어보시면 실마리를 잡으실 수 있으리라 생각합니다.

[wnghdcjfe]

답변 정말 감사합니다. 다시 한번 읽어 보겠습니다.

[KyoungWan]

번역 감사드립니다. 잘읽겠습니다

[kwoncharles]

overreacted에서 읽고 번역이 너무 좋아서 커밋 타고 들어왔습니다!
덕분에 좋은 글을 더 잘 이해할 수 있게 됐습니다 :)

[wdh2100]

좋은 번역 감사합니다~

[ynifamily3]

전 여지까지 setCount(c => c + 1) 의 용도를 state 계산이 복잡할때 한번만 수행하도록 하는 거인지만 알았는데 이런 활용이 있군요!

[mcwithimp]

좋은 번역 감사합니다. 아주 큰 도움이 되었습니다.

다만, 아래 번역은 약간의 혼동을 주네요.

그래서 만약 제가 {id: 10} 으로 데이터를 요청하고 {id: 20} 으로 바꾸었다면, {id: 20} 의 요청이 먼저 시작됩니다. 그래서 먼저 시작된 요청이 더 늦게 끝나서 잘못된 상태를 덮어씌울 수 있습니다.

{id: 20} 의 요청이 먼저 '시작'되는 게 아니라 요청의 응답이 먼저 '도착'할 수 있다는 걸 말하고 있습니다. 요정도 번역이 괜찮지 않을까 싶어요.

그러니까 제가 {id: 10} 으로 데이터를 요청하고 {id: 20} 으로 바꾸었는데, {id: 20} 의 요청 결과가 먼저 도착할 수 있습니다. 먼저 시작된 요청({id: 10})이 더 늦게 끝나서 잘못된 상태를 덮어씌울 수 있습니다.

감사합니다.

[adhrinae]

@mcwithimp 확인이 늦었네요. 번역에 대한 피드백 고맙습니다. 조만간 확인하고 지적해주신 부분 참고하여 수정하겠습니다.

[javarouka]

dan 의 글은 언제나 읽을때 즐겁고 읽은 후엔 무릎을 치게 만드네요. 좋은 글 번역 감사합니다

[carrotcold]

정말 너무 많이 매우 엄청 도움이 되었습니다! 번역 감사드립니다.

[Woomin-Jeon]

번역 감사드립니다! 많이 배우고 갑니다!

[zzang535]

감사합니다. 많은 도움이 되었습니다.

[zzang535]

리액트를 다룬지 6개월 정도 되는 초보 프론트엔드 개발자입니다. 위 글을 보고 useEffect에 관하여 헷갈렸던 부분이 많이 해결되어서 감사드립니다. 리액트를 다루는 기술을 1회독 해서 리액트에 대한 감은 잡았는데, useEffect 등 훅을 사용하거나 리액트 라이프사이클에 대한 이해가 아직 부족한데, 관련된 서적을 추천해주실 수 있는지 여쭤봅니다. 감사합니다!

[adhrinae]

@zzang535 국내 서적중에는 실전 리액트 프로그래밍(개정판) 추천합니다.

[rriverr]

안녕하세요!
이제 막 리액트에 입문하여 하나둘씩 배우는 중인데 이 글이 정말 많은 도움이 되고 있습니다 ㅎㅎ...
useEffect에 대해 궁금한 부분이 생겼을 때마다 이 글로 돌아와보면 항상 답이 있는 것 같아요.
가끔은 이렇게 너무 좋은 글들을 보게 되면 감사 인사를 드리고 싶더라고요!
좋은 번역 감사드립니다!

[juchanhwang]

좋은 글 감사합니다 !