[Nomad coders] React_Effects

https://reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

Effects의 필요성

• component가 매번 rerendering 되지 않고(useState 사용) 처음에만 코드가 실행되게 만들고 싶을 때
• 첫 번째 render에만 코드가 실행되고, 이후 state 변화에는 실행되지 않도록 하기 위함
• ex) API를 통해 데이터를 가져올 때

import { useState, useEffect } from "react";

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");
        }, []);

        useEffect(() => {
            console.log("i run when 'keyword' changes.");
        }, [keyword]);

        useEffect(() => {
            console.log("i run when 'counter' changes.");
        }, [counter]);
    
        return (
        <div>
          <input
            value={keyword}
            onChange={onChange}
            type="text"
            placeholder='Search here...'
          />
          <h1>{counter}</h1>
          <button onClick={onClick}>click me</button>
        </div>
        );
}

기본 형태

useEffect(() => {
      console.log("I run only once");
}, []);

→ 아무 조건 없이 처음 단 한 번만 render

 

useEffect(() => {
      console.log("i run when 'keyword' changes.");
}, [keyword]);

→ keyword가 변화할 때마다 render(한 글자마다 render)

 

useEffect(() => {
      console.log("i run when 'counter' changes.");
}, [counter]);

→ counter가 변화할 때마다 render(버튼 한 번 클릭 시 render)

 

결론적으로 useEffect의 첫 번째 인자로는 render 시 실행할 함수, 두 번째 인자로는 변화 여부에 따라 첫 번째 함수를 호출할 변수들의 리스트이다.