6.0부터

1. state

2. props

3. useEffect

 

import { useState } from "react";
import Button from "./Button";

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;​

 

component render되는 경우

- 처음으로 화면 refresh 할 때 

- component의 state가 변화할 때 (state를 change하고, 그럴 때마다 모든 것이 다시 실행됨)

 

만약!

component가 처음 render될 때만 코드를 실행시키고 싶다면?

(즉, 첫번째 render에만 코드가 실행되고, 다른 state 변화에는 실행되지 않도록 하고 싶다면)

ex. API를 통해 데이터를 가져오는 경우 -> 첫번째 component render에서 API를 call하고, 이후에 state가 변화할 때는 그 값을 다시 갖고 오고 싶지는 않을 것이다. 

ex2. 누군가 글자를 타이필할 때마다 새로운 API를 호출할 필요 없음

 

따라서, 특정 코드들이 첫번째 component render에서만 실행되게 하고 싶은 경우

 

useEffect(한번만 실행시킬 component, [원하는 component가 변화할 때 코드를 실행시키고 싶다면] )

 

 

Deps

내 코드의 특정한 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법

 

언제 코드를 실행시킬지 결정하는 방법 -> useEffect()

- component가 생성되는 첫 시작점

- 무언가가 update될 때

 

 

cleanup function

-reactjs를 component가 destroy 될때도 코드를 실행할 수 있다.

아래 두 코드는 같은 의미

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

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

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