[React] useEffect

1. useEffect 함수란?

React 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

 

2. useEffect 사용법

🔹 첫 번째

useEffect(() => {});

• useEffect의 가장 기본 형태이나, 거의 사용하지는 않는다.
• Dependency가 없기 때문에, 작은 요소가 하나라도 변화할 때마다 useEffect가 발동되어 불필요한 실행이 많아지기 때문이다.

🔹 두 번째

useEffect(() => {}, []);

• useEffect에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행한다.

🔹 세 번째

useEffect(() => {}, [name]);

• useEffect를 특정 값이 업데이트 될 때 호출한다.
• useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행한다.

 

3. useEffect 사용 예시

🌠 클릭한 횟수의 값을 alert 창에 띄워주는 예제

const myButton = () => {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
    	alert(count);
    });
    
    const showClickNum = () => {
    	setCount(count + 1);
    };
    
    return (
    	<button onClick = {showClickNum}>
        	Click Me
        </button>
    );

};

export default myButton;

• 사용자가 클릭하면 showClickNum 함수를 호출하는데, 이 함수는 count 값에 1을 더한다.
• 이 경우에 상태값이 업데이트 되므로 alert를 출력하는 useEffect()를 호출하게 된다.

 

🌠 특정 변수 값에만 동작하는 useEffect()

useEffect(() => {
    alert('Updated!');
});

useEffect(() => {
    alert(count);
}, [count]);

• 첫 번째 코드: 컴포넌트가 변경, 업데이트 될 경우 동작한다.
• 두 번째 코드: count 값이 업데이트 된 경우에만 해당 콜백을 실행한다.

 

🌠 useEffect()를 props에도 사용하기

useEffect(() => {
    alert('Props Updated');
}, [props.siteName]);

• useEffect의 두 번째 인자 값은 [] 내부에 state 뿐만 아니라, 전달받은 props 값 또한 사용이 가능하다.
• 즉, 부모로부터 전달받은 props의 값이 변경될 경우 컴포넌트를 업데이트 하는 코드 역시 작성이 가능하다.
• 위의 코드는 부모로부터 전달받은 props.siteName 값이 변하는 경우이다.

 

 

 

 

 

 

[ 참고 ]

- https://velog.io/@velopert/react-hooks

- https://ko-de-dev-green.tistory.com/18

- https://webisfree.com/2020-11-30/react-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-useeffect-%ED%9B%85-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C