function 컴포넌트 생명주기 관련해서 질문있습니다.
안녕하세요. Section10 함수형 컴포넌트의 생명주기에서 궁금한 점이 있어 질문 드립니다.
component가 unmount 되는 상황을 만들기 위해 router.push로 페이지를 이동하잖아요?
그런데 router.push로 이동할 때는 return()=>{...}의 내용이 제대로 실행되는데,
주소창에 직접 이동할 주소를 써서 이동했을 때에는 같은 동작이 실행되지 않더라구요.
둘다 현재 컴포넌트가 제거되고 새로운 컴포넌트가 화면에 나타나는 것아닌가요?
다르게 동작하는데 이유가 있는지, 아니면 제가 코드를 잘못 쓴건지 피드백 부탁드립니다. 감사합니다!
작성코드
useEffect(() => {
console.log('컴포넌트가 마운트됐습니다~');
return () => {
alert('컴포넌트가 제거됩니다~');
};
}, []);
useEffect(() => {
console.log('컴포넌트가 변경됐습니다~');
});
const onClickButton = () => {
setCount((prev) => prev + 1);
};
const onClickMove = () => {
router.push('/');
};
답변 1
1
안녕하세요!
주소창에 직접 입력하여 이동하는 경우, 페이지가 새로고침되는 것 입니다.
따라서 해당 컴포넌트가 언마운트되는 것이 아니라 전체 페이지가 새롭게 로드됩니다.
따라서 이 경우에는 useEffect의 cleanup 함수가 호출되지 않습니다.
반면에 router.push() 함수를 사용하여 페이지를 이동하는 경우, React Router가 사용되기 때문에 컴포넌트가 실제로 언마운트되고, 새로운 컴포넌트가 마운트됩니다.
이때 useEffect의 cleanup 함수가 호출되어 알림창(alert)이 뜨게 됩니다.
감사합니다.😊
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
41
1
댓글 기능 구현 중 질문드립니다.
0
67
1
쿠폰코드 발급
0
147
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
89
2
문의드립니다!! ㅠㅠ
0
107
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
80
2
_app.js 작성 이후로 에러가 발생하네요
0
96
2
학습자료
0
72
2
학습자료가 안열립니다.
0
51
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
111
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
101
2
const, let 사용 질문 드립니다.
0
72
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
123
2
회원가입 과제 피드백 부탁드립니다.
0
81
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
167
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3





