componentWillUnmount() 이 정확히 이해가 가지 않아서 질문 드립니다!
강사님 안녕하세요
강의 듣고 '실전 리액트 프로그래밍' 책도 사서 보고 있는데
개인적으로 강의 보다 책 내용이 훨씬훨씬훨씬 좋아서 만족스럽게 정독하고 있습니다 ㅎㅎ
다만 공부하는 중에 책이랑 리액트 공식 사이트를 봐도 이해가 안가는게 있어서요!
componentWillUnmount()이나, 그와 비슷한 useEffect 훅의 return 값에서
clearInterval 같이 클리어 해주는 패턴은 알지만, 정확히 이해를 못하고 있어요
https://ko.reactjs.org/docs/react-component.html#componentwillunmount
리액트 사이트에서 componentWillUnmount를 설명하는 내용 중에
정확히 '컴포넌트가 마운트 해제되어 제거되기 직전' 이 어떤 때일까요...?
마운트가 해제된다는 말은 DOM 에서 아예 삭제되기 전이라는 말일까요?
그렇다면 clear를 해주는 의미가 없지 않나요 어차피 DOM에서 날라간다면...
아니면 컴포넌트가 최초 렌더링 -> 마운트 -> 업데이트 -> 렌더링 후에
업데이트 될일이 없으면 언마운트 처리가 되는건가요?
마운트 해제의 의미와 마운트 해제가 언제, 어떤 것에 의해서 일어나는지를 도통 모르겠어요
혹시 자세히 알고 계신다면 답변 부탁드립니다 ㅠㅠ
답변 2
0
안녕하세요
책 내용 좋게 봐주셔서 감사합니다^^
언마운트는 JSX 에 포함되었다가 이후에 제거되는 경우에 발생합니다
아래 코드로 설명을 드리자면,
초기에 value 가 true 인 상황에서 버튼을 클릭하면 Comp1 은 언마운트되고 Comp2 는 마운트 됩니다
또 버튼을 클릭하면 Comp2 는 언마운트되고 Comp1 은 마운트 됩니다
```
return <div>
{value ? <Comp1 /> : <Comp2 />}
<button onClick={() => setValue(!value)}>change</button>
</div>;
```
언마운트가 되는 경우가 하나 더 있는데요
key 가 변하는 경우입니다
아래 코드에서 value 가 변할 때마다 Comp1 는 언마운트되고 새로운 Comp1 이 마운트 됩니다
<Comp1 key={value} />
참고로 componentWillUnmount 는 클래스 컴포넌트에서만 사용되며, 신규 프로젝트를 하실 때는 함수 컴포넌트로 작성하실 것을 추천드립니다
자동완성기능이 안되네요 ..
0
499
3
화면에 에러가나네요 ...
0
515
2
setValue 함수 질문 있습니다.
0
840
1
찾아야한다 실습 문의
0
469
1
훅 기초 익히기 - 배치 처리와 순차적 처리의 차이
0
470
1
cra, next.js 관련 질문 드립니다!
0
605
1
useState 배열 비구조화 문법 질문!
0
252
1
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
1
1081
2
Saga 오류 이거 혹시 왜이런지 알수 있을까요?
0
370
2
http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요
0
657
1
match
1
494
1
버튼이 생성되지 않습니다 .
0
286
1
혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?
0
262
1
saga 문제
0
248
1
에러가 발생하는데 이유가뭘까요..?
0
388
2
선생님과 똑같이 했는데 다 rendering 됩니다.
0
202
1
컴포넌트와 컨테이너의 기준
0
315
1
커스텀훅의 개념과 함수차이
1
1197
1
useEffect 실전 활용법(1) 강의에서 질문있습니다.
0
337
1
리덕스, 사가파일들의 관리
0
207
1
useImperativeHandle 질문 입니다.
0
280
1
컴파일 문의드립니다.
0
203
1
React.memo 관련 질문이 있습니다.
0
373
1
Context API vs Redux 사용 빈도
0
212
1





