$$config title: [ReactJS] useEffect 개념 keywords: - ReactJS - useEffect - ... $$ # useEffect 개념 및 필요성 : 컴포넌트가 처음 생성(=mount)되었을 때, 특정 작업을 처리하는 Hook (이외에도 컴포넌트가 사라질 때(unmount), 컴포넌트의 특정 props나 state가 바뀔 때(update) 특정 작업을 처리함.) >일반적으로 위에 보이는 코드를 보면 useState 쓰면 state가 변할 때마다 rendered되는 것이 일반적이다. 하지만 공공데이터 API같은 데이터를 가져올 때, 해당 데이터를 상태가 변할 때마다 가져오는 걸 원하진 않을 것이다. 즉, 처음 render(실행)되었을 때만 실행되도록 하고 싶지만 useState로는 불가능함. 즉, 위 상황과 달리 component가 처음 실행되었을 때만 실행되고 state가 변해도 바뀌지 않고 다시는 실행되지 않는 것이 필요한데 그 작업을 해주는 것이 useEffect이다. > 앞서 말한 useEffect 실행 조건 상황 ![](https://blog.kakaocdn.net/dn/J6VPG/btreOs3fnFB/J3PD4pk5vQfiHtSw0BKA51/img.png) # useEffect 형식(사용 방법) ```js useEffect(function, deps) ``` - function : useEffect로 한번 실행하고자 하는 작업(함수) - deps : 배열 형태로 배열 안에는 검사하고자하는 특정 값 or 빈 배열 # useEffect 예제 ```js import { useEffect, useState } from "react"; function App() { const [counter, setCounter] = useState(0); const onClick = () => setCounter((prev) => prev +1); console.log("i run all the time"); useEffect(()=>{ console.log("Call the API"); }, []); return (

{counter}

); } export default App; ``` > 실행 결과 ![useEffect](https://to2.kr/dT2) 즉, App 컴포넌트가 처음 실행되었을 때 useEffect 전에 "i run all the time" 이 처음 실행되고 그 이후에 useEffect로 "Call the API"가 실행된다. 그 이후로는 나타나지 않고 counter라는 state를 변경할 때마다 App 컴포넌트 전체가 rerendering(재생성) 되면서 "i run all the time" 가 변경할 때마다 나오는 것이다. useEffect의 문구는 나오지 않음.