리액트 useEffect (한번만 실행하거나 센서처럼 동작)


리액트 useEffect (한번만 실행하거나 센서처럼 동작)

리렌더링 될 때마다 반복실행되어도 괜찮은 코드도 있을 테지만, 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수 도 있다. 예를들어, API로 외부 데이터를 가져올 때 컴포넌트 렌더링되는 순간순간 API 요청을 하면 곤란할때가 있다( 예를들어 한번호출시 1000원짜리 API라면?!...) 그럴때 사용하면 좋은것이 바로 useEffect !! function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); useEffect(() => { //실행될 때 딱한번 실행되고 더이상 실행 안됨 console.log("I run only once."); }, []); r...



원문링크 : 리액트 useEffect (한번만 실행하거나 센서처럼 동작)