inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 게임을 만들며 배우는 React

5-6. 클래스와 Hooks 라이프사이클 비교

렌더링과 mount/unmount

303

mhr

작성한 질문수 52

0

const RSP = () => {
  useEffect(() => {
    console.log('다시 실행');
    interval.current = setInterval(changeHand, 100);

    return () => {
      console.log('종료');
      clearInterval(interval.current);
    }
  }, [imgCoord]);
  return ( 
    ...
  );
}

useEffect가 받는 effect 함수가 리턴하는 함수가 componentWillUnmount 역할을 하는 함수라고 하셨는데요. 그리고 setInterval 안에서 changeHand에 의해서 imgCoord가 바뀌면서 useEffect가 받는 effect 함수가 계속 실행되는 것을 보게 되는데, 그럼 여기서 렌더링 과정이라는 게 컴포넌트를 unmount 했다가 새로 mount하는 과정이라고 봐도 괜찮은 것인가요? state가 바뀔 때 컴포넌트 함수 전체가 다시 실행된다는 얘기도 하셨던 것 같은데, 그럼 이 과정도 unmount하고 다시 mount하는 과정인 것인가요? 렌더링과 mount/unmount 과정의 관계? 차이?가 궁금합니다. 

react

답변 1

0

제로초(조현영)

deps가 []일때만 willUnmount와 같고요.

deps에 요소가 존재하면 deps의 변경으로 useEffect가 새로 시작하기 전에 실행됩니다.

npm run dev 실행 시 포트가 안뜨는 문제

0

202

2

timeouts.current를 useEffect 의 input값으로 넣었을때

0

85

2

렌더링 테스트 코드 (Hooks)

0

80

1

Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.

0

149

1

해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"

1

191

1

강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ

0

95

1

useMemo와 useCallback 사용 시기

0

205

2

onRightClickTd가 작동을 하지 않습니다.

0

226

1

action.type 불러오는 방식

0

222

2

onClickRedo 질문

0

172

1

const Try = require(./Try) 빨간줄

0

248

1

npx webpack 실행시

0

313

1

지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.

0

234

1

강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?

0

311

1

react devtool이 enable 않됩니다.

0

530

2

React 랜더링이 되지 않습니다.

0

409

2

비동기로 동작하는 setState에 대해서

0

331

1

npm run dev 할 때 에러발생

0

478

2

memo, PureComponenet, shouldComponentUpdate 관련 질문

0

206

1

devMiddleware의 필요성

0

352

1

리액트에서 화살표 함수를 사용해야하는 이유

0

931

2

path.join관련질문

0

280

2

2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러

0

371

1

next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니

1

488

4