인프런 커뮤니티 질문&답변
작성한 질문수
componentWillUnmount() 이 정확히 이해가 가지 않아서 질문 드립니다!
해결된 질문
작성
·
1.5K
0
강사님 안녕하세요
강의 듣고 '실전 리액트 프로그래밍' 책도 사서 보고 있는데
개인적으로 강의 보다 책 내용이 훨씬훨씬훨씬 좋아서 만족스럽게 정독하고 있습니다 ㅎㅎ
다만 공부하는 중에 책이랑 리액트 공식 사이트를 봐도 이해가 안가는게 있어서요!
componentWillUnmount()이나, 그와 비슷한 useEffect 훅의 return 값에서
clearInterval 같이 클리어 해주는 패턴은 알지만, 정확히 이해를 못하고 있어요
https://ko.reactjs.org/docs/react-component.html#componentwillunmount
리액트 사이트에서 componentWillUnmount를 설명하는 내용 중에
정확히 '컴포넌트가 마운트 해제되어 제거되기 직전' 이 어떤 때일까요...?
마운트가 해제된다는 말은 DOM 에서 아예 삭제되기 전이라는 말일까요?
그렇다면 clear를 해주는 의미가 없지 않나요 어차피 DOM에서 날라간다면...
아니면 컴포넌트가 최초 렌더링 -> 마운트 -> 업데이트 -> 렌더링 후에
업데이트 될일이 없으면 언마운트 처리가 되는건가요?
마운트 해제의 의미와 마운트 해제가 언제, 어떤 것에 의해서 일어나는지를 도통 모르겠어요
혹시 자세히 알고 계신다면 답변 부탁드립니다 ㅠㅠ
답변 2
0
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 는 클래스 컴포넌트에서만 사용되며, 신규 프로젝트를 하실 때는 함수 컴포넌트로 작성하실 것을 추천드립니다