개발자

리액트 useEffect와 unmount에 관해

2024년 01월 19일조회 57

오늘 회사 스터디를 진행 하면서 제가 공부하면서 느낀 내용에 대해 팀원 분들의 의견이 달라 여기에 궁금해서 끄적여 봅니다... useEffect가 컴포넌트 안에서 선언이 되었을 다고 가정했을 때, 1. 해당 컴포넌트가 mount 되고, unmount 될 때 clean up 함수가 호출 된다. 2. useEffect 내에 state를 변경하는 작업이 존재한다면, react fiber reconciler 에 의해 react fiber 의 작업이 이루어지고, 해당 내용을 변경한 VDOM에 의해 다시 실제 DOM에 바뀐 부분이 새로 그려진다.. === 재렌더링 제가 이해한 게 맞을 까요??

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 01월 19일

네, 그대로 이해하셨습니다. `useEffect`는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 첫 번째 인자로 전달되는 함수는 항상 컴포넌트가 업데이트될 때 실행됩니다. 하지만, 조건을 추가하여 특정 상황에서만 실행되도록 설정하는 것도 가능합니다. `useEffect`의 두 번째 인자로 배열을 넘기고 그 배열 안에 검사하고 싶은 값을 넣으면 해당 값이 바뀔 때 마다첫 번째 인자로 전달한 함수가 실행됩니다. 만약 빈 배열을 넣게 되면 컴포넌트가 처음 마운트 될 때만 실행되고, 아무것도 전달하지 않으면 업데이트 될 때마다 실행됩니다. 클린업 함수는 `useEffect`에서 반환한 함수입니다. 이 함수는 `useEffect`의 첫 번째 파라미터에서 반환해야 합니다. 클린업 함수는 컴포넌트가 언마운트되거나 다시 렌더링되기 직전에 호출됩니다. 주로 등록한 이벤트를 제거하거나 타이머를 종료하는 등의 정리작업을 수행하는 용도로 사용됩니다. 이해하신 것처럼, 만약 useEffect 내부에서 state를 변경하는 작업이 있으면, 이는 컴포넌트의 재렌더링을 유발합니다. 때문에, 무한 루프에 빠지지 않도록 주의해야 합니다. 따라서 이해하신 내용은 맞습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!