24.05.20_TIL React (리엑트) _ 3. useEffect & Cleanup function

 

 

 

 

1. 카운터를 만들어보자.

 

먼저 src 의 App.js 를 수정해준다.

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  return (
    <div>
      <h1> {counter} </h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

클릭을 누르면 숫자가 올라간다.

 

 

 

 

 

 

 

2. 처음에만 코드가 실행되고 다른 state 변화에는 실행되지 않도록 해보자

api 를 가져올 때 처음에만 api 를 가져오고 그 다음에는 안가져 올 수 있도록!(로그인 같은 개념인가?)

 

index.js 도 수정해야함

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

 

App.js 도 수정

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
    console.log("tt");
  useEffect(() => {
    console.log("cat")
  }, []);      # 그 다음부터 안찍히게 해줌
  return (
    <div>
      <h1> {counter} </h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

++ 왜 두번씩 찍히는가에 대한 답변 develop 모드에서는 그렇게 console이 찍힌다고함...(그러니까 왜ㅠㅠ)

 

 

 

 

 

 

 

 

 

 

 

3. 서치바를 만들어보자. useEffect

 

App.js 코드를 바꾸어주자. - 시분 바꿀 때 썼던 코드 쓰기

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);
    console.log("tt");
  useEffect(() => {
    console.log("cat")
  }, []);
  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;

 

타이핑을 하거나 지우거나 등 키보드를 두드리면 일단 숫자가 올라간다.

 

 

서치를 만들어서 써도 클릭이랑 같이 움직인다.

이것을 안하고 서치는 서치대로 클릭은 클릭대로 쓸 수 있게 만들어보자.

 

 

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);
    console.log("tt");
  useEffect(() => {
    console.log("cat")
  }, []);
  useEffect(() => {
    console.log("search", keyword);
  }, [keyword]); // keyword 가 변화할 때 코드를 실행할거라고 알려줌

  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;

 

 

  if (keyword !== "" && keyword.length > 5)

 

5글자 이상으로 제약을 걸면 카운터가 5번 올라가고 나서 (글자가 5개 써지고 나서.! 띄어쓰기나 지우기를 해도 카운터가 올라가는데 그렇다고 글자가 써지는 것은 아니고 5글자가 써지고 나서야) 다음에 글자가 써지는 것을 볼 수 있다.

 

useEffect(() => {
    console.log("together")
  }, [keyword, counter]); # 같이 인쇄하고 싶을 때는 마지막에 이렇게 넣어주면 됨

 

 

* useEffect 는 언제 코드를 실행할지 선택해주는 코드 두개를 다 쓸 때는 두개중 하나가 먼저 될때 쓴다.

 

 

 

 

 

 

 

 

 

 

 

4. Cleanup function

import { useState } from "react";

function App() {
  const [showing, setshowing] = useState(false);
  const onClick = () => setshowing((prev) => !prev);
  return (
    <div>
      <button onClick={onClick}>{showing ? "Hide" : "show"} </button>
    </div>
  );
}

export default App;

 

show를 누르면 hide 가 나타난다. 무언가를 숨겨주는 것을 만들어보자.

import { useState } from "react";

function Hello() {
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setshowing] = useState(false);
  const onClick = () => setshowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "show"} </button>
    </div>
  );
}

export default App;

 

 

hide 를 누르면 hello라는 글자가 없어지고 show 버튼만 보인다.

 

function Hello() {
  useEffect(() => {console.log("here!")}, [])
  return <h1>Hello</h1>;
}

 

 

show를 누를 때에만 숫자가 늘어나고 hide를 누르면 늘어나지 않는다!

코드에서도 show에서는 hide라는 코드가 보이지 않음. 딱 show만 노출해준다.

 

function Hello() {
  useEffect(() => {console.log("here!");
    return () => console.log("No!");
  }, [])
  return <h1>Hello</h1>;
}

 

 

useEffect 에 다시 리턴으로 찍어주는 함수를 넣어주면 clean function이 만들어지는데 hide를 누르면 찍히는 console을 볼 수 있다.

언제 보이고 언제 숨겨주었는데 console에 노출해서 확인할 수 있다. 시간? 코드를 확인할 때? 어디에서는 이런 코드를 써서 확인해 볼 수 있다는...

 

function Hello() {
  function byeFn() {
    console.log("bye :(");
  }
  function hiFn() {
    console.log("hi! :)");
    return byeFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

 

 

함수를 나누어서 위와 같이 쓸 수도 있다.!