inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 게임을 만들며 배우는 React

가위바위보 강의에서 질문이 있습니다.

211

뿌셔뿌셔

작성한 질문수 11

0

안녕하세요. 제로초님,

가위바위보 강좌에서 2가지 질문이 있습니다.

 

1. componentDidMount와 WillMount

    componentDidMount() {

        this.interval = setInterval(this.computerChange, 50);

    }

 

    componentWillMount() {

        clearInterval(this.interval);

    }

 

    onClickBtn = (e) => {

        clearInterval(this.interval);

        const myChoice = e.target.id;

        const { imgCoord } = this.state;

 

 

콘솔에 찍어보니 WillMount가 먼저 찍히고 그 다음에 DidMount가 찍히는 것으로 확인하였습니다.

제로초님 블로그를 보고 호출되는 순서는 이해를 하였는데요.

 

위 코드에서 WillMount 함수를 삭제해도 게임에는 아무런 문제가 없는데 

렌더링이 되기 전 호출이 되어야 하는, WillMount가 꼭 필요한 상황들이 있을까요?

 

 

2. useEffect

    const onClickBtn = (e) => {

        if (interval.current) {

            clearInterval(interval.current);

 

1번 부분의 hooks 에 제로초님 깃허브 코드에서는 클릭 버튼에 if문이 추가된 것을 보았습니다. 

 

제 생각으로는 useEffect는 콘솔로 확인해보았을 때, 실행이 반복(?)되고 있기때문에 클릭으로 실행되는 onClickBtn 코드는 

return문이 실행되기 전이어야 함을 구분하기 위한 것인가…? 라고 생각해보았는데요. 테스트해보니 있어도 없어도 게임 실행에는 문제가 없었는데

 

깃허브 코드에는 넣으신 이유가 궁금합니다!

 

react

답변 1

0

제로초(조현영)

1. 보통 서버사이드렌더링 때 썼습니다. 참고로 willMount는 쓰지 말라고 권장되고 있습니다 요즘. 애초에 클래스 컴포넌트 자체가 안 쓰입니다.

2. 없어도 되긴 합니다. 근데 의미상은 저게 더 자연스러워서 넣었습니다.

0

뿌셔뿌셔

감사합니다!

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

0

240

2

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

0

98

2

렌더링 테스트 코드 (Hooks)

0

93

1

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

0

167

1

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

1

209

1

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

0

108

1

useMemo와 useCallback 사용 시기

0

221

2

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

0

237

1

action.type 불러오는 방식

0

226

2

onClickRedo 질문

0

177

1

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

0

262

1

npx webpack 실행시

0

324

1

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

0

243

1

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

0

319

1

react devtool이 enable 않됩니다.

0

548

2

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

0

422

2

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

0

340

1

npm run dev 할 때 에러발생

0

497

2

memo, PureComponenet, shouldComponentUpdate 관련 질문

0

211

1

devMiddleware의 필요성

0

358

1

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

0

948

2

path.join관련질문

0

288

2

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

0

384

1

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

1

503

4