[React.js] useEffect

 

useEffect : 컴포넌트의 사이드 이펙트(파생효과)를 제어하는 Hook

 

훅의 다른 예시들은

 

https://mm-study-front.tistory.com/43

[React.js] React Hooks

---

리액트 내장 기능이니깐 import 필수

 

 

import { useEffect } from "react";

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

 

 → []의 값이 바뀔 때마다  ()=>{} 콜백함수 실행

 

→ 이 때의 [] 배열을 의존성 배열이라 부름(deps), 배열이니깐 여러 개의 값 올 수 있음!

 

 

https://mm-study-front.tistory.com/44

[React.js] 간단한 실습 2. 인원수 카운트앱

여기의 코드로 예시를 들면 

 

App.jsx에

 

function App() {

  const [count, setCount] = useState(0);

  const [input, setInput] = useState("");

  useEffect(() => {

    console.log(count, input);

  }, [count, input]);

 

하면

 

내가 버튼을 누르거나, input 창에 글자를 입력할 때마다 상태값이 달라짐

 

 

그러면 useEffect말고 onClick 등 자바스크립트 함수 쓰면 되는 거 아닌가?

 

→ No!!!!

 

왜냐하면 리액트의 state는 비동기 처리여서 사이드 이펙트를 제어가 안됨  

 

→ 익숙하지 않지만 공부해서 useEffect로 사이드 이펙트 제어 하자