React. React JS - Effects (2) Deps

React. React JS - Effects (1)

지난 포스팅의 내용에 이어서 진행됨.

 

---

 

📌 useEffect

useEffect는 두개의 argument를 가지는 함수이다.

 

 

arg1 > effect: EffectCallback (한번만 실행할 코드를 담은 콜백)

arg2 > deps?DependencyList

 

const [keyword, setKeyword] = useState("");

const onChange = e => setKeyword(e.target.value);

 

 

<div>
   <input
        onChange={onChange}
        value={keyword}
        type="text"
        placeholder="Search Here..."
    />
   <h1>{counter}</h1>
   <button onClick={onClick}>click me</button>
</div>

 

App 컴포넌트에 검색 동작을 나타내는 

콘솔로그를 찍어보면

 

input이 change할때마다 (onChange 이벤트마다) App 컴포넌트가 재실행되고,

검색동작도 바뀔때마다 되고있다.

 

심지어!

검색과는 전혀 관련없는 counter의 기능(버튼 onclick시)

을 해도 컴포넌트가 재실행되므로

컴포넌트 안에 있는 검색 기능도 계속해서 실행된다.

 

여기서 우리는 useEffect를 사용하여

keyword가 변경될때만 실행되도록 설정하자.

 

** 지난시간에는 두번째 argument인 deps를 설정 안해서

그냥 처음 로드시에 단 한번만 실행되게 했었다.

 

 

useEffect(() => {
    console.log("search for", keyword);
  }, [keyword]);

deps 안에 [keyword]를 적어줘서

첫번째 argument였던 콜백함수가 keyword가 변경될때만 실행되도록 해준다!

(다른 count나 이런거가 변하면 콜백이 실행되지 않는다.)

 

 

아까처럼 계속 search for이 안뜬다!

useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("search for", keyword);
    }
  }, [keyword]);

 

keyword가 공백이 아니고, 5글자보다 길때 검색되도록

if 조건을 추가해주었다.

 

 

+)

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

-> 변경조건 설정은 2개도 가능 ( 리스트니까 ) 

 

 

 

 

---

 

RECAP.

 

useState로 state가 바뀔 때 마다component를 refresh하는 것.>> 좋을때도 있지만 컴포넌트 전체가 재실행되므로원하지 않은 부분도 재실행될 수 있다.

 

🔻

 

그럴때 사용하는 것이 바로 effects!

 

📌 useEffect(callback, [deps])

 

첫번째 argument는 한번만 실행 될 코드를 담은 콜백함수이고,두번째 argument인 deps는 해당 state가 바뀔 때만 콜백이 실행되도록 해주는 것.** deps = dependency List. >>> 리액트가 지켜봐야 할 것. (변화하는지)

 

 

 

 

 

 

 

---

Ref. 

Free Lecture

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders