useEffect 란 리액트 컴포넌트가 렌더링 될때마다 특정 작업(side Effect)를 실행할 수 있도록 하는 리액트 HOOKS 이다. 여기서 SideEffect는 컴포넌트가 렌더링 된 이후에 비동기로 처리 되어야 하는 부수적인 효과를 말한다. 이러한 기능으로 인해서 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용한 생명주기 메소드를 비슷하게 구현 할 수 있게 되었다.
useEffect 의 문법의 제일 마지막에는 빈배열이 존재한다.
빈배열은 Dependency Array 라고 하는데 의존성 배열이라고 한다.
useEffect는 무조건 최초 1회 실행이다. 의존성 배열이 있든 없든 무조건 최초 1회는 렌더링이 완료된후 실행 된다.
useEffect(() => {
console.log("렌더링 될때마다 실행");
});
이렇게 되면 리액트에서는 상태값이 변경되어서 리렌더링이 될때 무조건 저 useEffect 함수가 실행 된다.
useEffect(() => {
console.log("맨 처음 렌더링될 때 한 번만 실행");
},[]);
만약에 최초 1회만 즉 맨 처음 렌더링 될때 한번말 실행되게 하고 싶다면 의존성 배열에 빈값을 넣어주면 된다.
useEffect(() => {
console.log(name);
console.log("name이라는 값이 업데이트 될 때만 실행");
},[name]);
만약에 name 이라는 상태값이 변경될때만 저 콘솔을 띄우고 싶다면 의존성 배열에 변경을 감지할 상태값을 의존성 배열에 넣어주면 된다.
