JS => useEffect
useEffect란?
함수 컴포넌트에서 side effect를 수행할 수 있는 리액트 내장 API 함수이다. side effect는 실행되는 함수 외부에 영향을 미치는 것이라고 생각하면 된다.
컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 상태가 바뀔 때) 특정 함수를 처리하는 방법이다.
파라미터에 따른 예시
두 번째 파라미터에 빈 배열
useEffect 예시
useEffect(() => { console.log('컴포넌트가 화면에 나타날 때'); return () => { console.log('컴포넌트가 화면에서 사라질 때'); }; }, []);
첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열이 들어간다.
위의 예시는 두 번째 인자에 빈 배열이 들어가는데, 이는 마운트 될 때(컴포넌트가 처음 나타날 때) 첫 번재 파라미터인 함수가 호출된다.
그리고 useEffect에서는 함수를 반환 할 수 있는데, 이를 "cleanup 함수" 라고 부른다.
cleanup 함수는 useEffect에 대한 뒷처리를 해준다고 이해하면 되는데,
두 번째 파라미터인 배열이 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.
두 번째 파라미터에 특정 값
function Mymoney({ mymoney }) {
useEffect(() => {
console.log('최신 mymoney 값');
return () => {
console.log('이전 mymoney 값');
};
}, [user]);
}
return (...)
}
위 예시처럼 두 번째 파라미터에 특정 값을 넣게 된다면,
컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다.
그리고 배열 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 된다.
두 번째 파라미터에 특정 값 없음
두 번째 파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출이 된다.
참고사항
리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 된다.
하지만 실제 컴포넌트에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당 된다.
Author And Source
이 문제에 관하여(JS => useEffect), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@whwodgns/JS-useEffect저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)