동백 // 노마드 코더 React JS: EFFECTS

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

Introduction

핵심 : React에서 Event는 무엇인지, 왜 배워야 하는지에 대해서 알아본다.

 

 

// button.js에 있는 Button 컴포넌트를 import한다.
import { useState } from "react";

function App() {
  // state
  const [counter, setValue] = useState(0);

  // function
  const onClick =() => {
    // btn을 클릭시 counter를 2씩 증가해주고 리렌더링
    setValue(prev => prev+2);
  }

  // rendering
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

. 위의 코드는 우리에게 익숙한 방식이다.

state를 사용해주고, value(counter)를 받아오고, value를 수정(setValue)하기 위해 function(onClick)을 받아온다.

 

. 가끔은 반복해서 렌더링될 때마다 반복 실행되어도 괜찮은 코드가 있을 수 있다. 그러나 가끔은 컴포넌트가 처음 렌더링될 때만 코드가 실행되길 원할수도있다.

 

예를 들어서 내가 API를 통해 데이터를 가져올 때 첫번째 컴포넌트 렌더에서 API를 call하고, 이후에 state가 변화할 때, 그 API에서 데이터를 또 다시 가져오는 것을 막고싶을 것이다. 

 

. 전에서 배웠듯 내가 modify를 통해서 state를 변경한다면 모든 code들은 다시 실행될 것이다.

가끔은 모든 code들이 다시 실행되는 것이 괜찮지만 때론 처음 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 때도 있을 것이다. 이게 Effect의 필요이유이다.

 

 

 

 

 

---

 

useEffect

핵심 : 리렌더링시 특정 코드의 실행을 제한하는 방법을 배운다.

 

. 코드가 렌더링될때마다 자동으로 반복되지않게 하는 방법은 useEffect라고 불리우는 function을 사용하는 것이다.

import { useEffect } from "react";

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

첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드가 될 것이다.

두 번째 argument는 니코쌤이 나중에 알려주신다 함 (추후 업데이트 할 것)

 

function App() {
  // --------- state ---------
  const [counter, setValue] = useState(0);

  // --------- function ---------
  const onClick =() => {
    // btn을 클릭시 counter를 2씩 증가해주고 리렌더링
    setValue(prev => prev+2);
  }
  console.log("I run all the times");
  
  const iRunOnlyOnce =() => {
    console.log("I just wanna one rendering");
  }

  // --------- rendering ---------
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

. 위의 코드에서 console.log("I just wanna one rendering")를 한번만 실행하게 만들고싶다.

그렇다면 useEffect에게 첫 인자로 우리의 function을 주고, 두번째 인자로는 빈 array를 준다.

  useEffect(iRunOnlyOnce, []);

 

. useEffect를 사용한 console.log는 시작할 때만 한번 출력되었다.

 

아래 코드와 같이 function 형태로 만들어 줄 수도 있다.

  useEffect(() => {
    console.log("I just wanna one rendering");
  }, []);

 

. 쉽게 설명하면 useEffect는 우리 코드가 딱 한번만 실행될 수 있도록 보호해주는 역할을 한다.

 

 

---

 

Deps

핵심 : useEffect의 비밀에 감춰진 두번째 인자의 역할에 대해서 알아본다.

 

// --------- import ---------
import { useState, useEffect } from "react";

function App() {
  // --------- state ---------
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("")

  // --------- function ---------
  const onChange = (event) => {
    setKeyword(event.target.value);
  }
  
  const onClick =() => {
    // btn을 클릭시 counter를 2씩 증가해주고 리렌더링
    setValue(prev => prev+2);
  }
  console.log("I run all the times");

  useEffect(() => {
    console.log("I just wanna one rendering");
  }, []);

  // --------- rendering ---------
  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here..."/>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

. 위 사진을 통해 알 수있듯이 현재 타이핑을 onChange를 통해서 감지할 때마다 state를 modify하고있다. 

 

. 만약 누군가가 글자를 타이핑할 때마다 API를 새로 호출한다고 생각하면 끔찍하다....;

 

 

. 다행히 우리는 useEffect를 이미 알고있다!!!

그러므로 우리는 이제 우리의 코드의 특정한 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법을 배울수있다.

 

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

. 위와 같이 적으면 문제점이 딱 한번만 실행되는 것이다. 우리는 keyword가 변화할때만 코드를 실행시키는 것이다.

 

 

. 만약  keyword가 변화할때만 코드를 실행시키고 싶다면, 두번째 인자에 'keyword'라고 적어주면 된다.

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

위 코드의 뜻은 'keyword'가 변화할 때만 코드를 실행할 것이라고 react.js에게 알려주는 것이다.

 

 

첫 번째 argument는 수행하고자 하는 작업이 들어간다.

두 번째 argument는 배열 형태이며, 배열안에는 검사하고싶은 특정값이나 빈배열이 들어가는데 

빈배열의 경우에는 단 한번만 실행되도록 한다.

 

이제 더는 click을 통해 counter가 리렌더링될 때 같이 렌더링되지않는다!!!

 

 

. 아직 한가지 문제가 있는데 컴포넌트가 시작할 때도 검색이 되어지고 있다는 문제점이다.

 

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

. 위 코드는 만약 keyword가 빈값이 아니라면, 즉 입력을 받은 상태이거나 길이가 5 초과일 때 console.log를 출력하라는 뜻이다.

 

 

 

. 이제 우리는 특정한 무언가가 변화할 때 특정 코드만 실행하도록 할 수 있다!!!!

ex) keyword가 변화했을 때 만약 keyword가 빈값이 아니거나, 6글자 이상을 받았을 때 실행문을 실행하는 것처럼

// --------- import ---------
import { useState, useEffect } from "react";

function App() {
  // --------- state ---------
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("")

  // --------- function ---------
  const onChange = (event) => {
    setKeyword(event.target.value);
  }
  
  const onClick =() => {
    // btn을 클릭시 counter를 2씩 증가해주고 리렌더링
    setValue(prev => prev+2);
  }
  console.log("I run all the times");

  useEffect(() => {
    console.log("I just wanna one rendering");
  }, []);
  
  useEffect(() => {
    if(keyword !=="" && keyword.length > 5){
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);

  // --------- rendering ---------
  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here..."/>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

 

---

 

Cleanup function

핵심 : cleanup function에 대해서 알아본다.

 

 

 

// --------- import ---------
import { useEffect, useState } from "react";

function App() {
  // --------- state ---------
const [showing, setShowing] = useState(false);
  // --------- function ---------
const onClick =() => {
  setShowing(prev => !prev);
}

function Hello() {
  useEffect(()=> {
    console.log("I'm here");
  }, [])
  return  <h1>Hello</h1>;
}
  // --------- rendering ---------
  return (
    <div>

      {showing ? <Hello />: null}
      {/* 버튼을 클릭시 함수가 호출되고, value가 false이면 "Hide, True이면 "Show"출력*/}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

. 여기까지는 우리가 배워왔던 것들이다.

새로운 사실은 컴포넌트가 업데이트나 실행될 때 말고, destory 될 때도 코드를 실행할 수 있다는 것이다!!!

 

 

. Cleanup function은 그냥 function이지만, 나의 컴포넌트가 destroy될 때 뭔가 할 수 있도록 해준다.

Cleanup function의 사용 방법은 useEffect function이 컴포넌트가 파괴될시 실행할 function을 return하는 것이다.

  useEffect(()=> {
    console.log("Created :)");
    return () => console.log("destoryed")
  }, [])

 

 

---

 

 

핵심 요약

1. 가끔은 모든 code들이 다시 실행되는 것이 괜찮지만 때론 처음 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 때도 있을 것이다. 이게 Effect의 필요이유이다.

 

2. 코드가 렌더링될때마다 자동으로 반복되지않게 하는 방법은 useEffect라고 불리우는 function을 사용하는 것이다.

 

3. 쉽게 설명하면 useEffect는 우리 코드가 딱 한번만 실행될 수 있도록 보호해주는 역할을 한다.

 

4. 첫 번째 argument는 수행하고자 하는 작업이 들어간다.
두 번째 argument는 배열 형태이며, 배열안에는 검사하고싶은 특정값이나 빈배열이 들어가는데 
빈배열의 경우에는 단 한번만 실행되도록 한다.

 

5. 이제 우리는 특정한 무언가가 변화할 때 특정 코드만 실행하도록 할 수 있다!!!!
ex) keyword가 변화했을 때 만약 keyword가 빈값이 아니거나, 6글자 이상을 받았을 때 실행문을 실행하는 것처럼

 

6. Cleanup function은 그냥 function이지만, 나의 컴포넌트가 destroy될 때 뭔가 할 수 있도록 해준다.

 

7. Cleanup function의 사용 방법은 useEffect function이 컴포넌트가 파괴될시 실행할 function을 return하는 것이다.