[React] useEffect를 사용하여 마운트언마운트 업데이트 시 할 작업 설정하기


[React] useEffect를 사용하여 마운트언마운트 업데이트 시 할 작업 설정하기

리액트 컴포넌트가 처음 화면에 나타나게 되거나 화면에서 사라지게 될 때 특정 작업을 할 수 있음 추가적으로 컴포넌트의 props나 상태가 바껴 업데이트 되거나 업데이트 전에 혹은 리 로딩 될 때마다 어떤 작업을 등록할 수 있다. 컴포넌트가 나타나는 것 - mount 컴포넌트가 사라지는 것 - un mount 예시는 이전에 작성된 useList를 활용 (배열 항목 추가, 제거, 수정 포스트) userList.js 파일에 해당 소스를 추가한다. useEffect(() => { console.log("컴포넌트가 화면에 나타남"); // setInterval, setTimeout등 시간 함수를 사용할 때 return () => { console.log("컴포넌트가 화면에서 사라짐") } },[]); // 두 번째 파라미터에 비어있는 배열 선언 최초 로딩 시에는 컴포넌트가 3개라 콘솔에 세 번 찍혔고 아래 콘솔로그는 삭제버튼을 눌러 컴포넌트 중 하나를 삭제했을 때 찍힌 로그다. 두 번째 파라...


#effect #리액트 #렌더링 #랜더링 #useEffect #use #unmount #rendering #reactjs #React #mount #이펙트

원문링크 : [React] useEffect를 사용하여 마운트언마운트 업데이트 시 할 작업 설정하기