React 함수형 컴포넌트

함수형 컴포넌트는

state, lifecycle 이 없다.

hook 안에서 또 hook 을 호출하면 앞에서 리턴하고 함수가 끝나버리기 때문에

뒤에오는 hook은 실행이 안된다. 아래와같이 내부에 쓰면 안됨.

잘못된 예시

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) return;
	const [state, setState] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

const [ state, setState ] = useState(초기값)

state 는 값

setState 는 함수

useEffect(didUpdate);

useEffect(**() => {}**, [count]) // 진한 부분이 함수 

의존성배열

[count] 가 변할때마다(그 안에 state를 넣을것이다), 앞의 함수가 실행된다.

근데 그게 빈배열이면 (바라보는 state 가 없으면) 바라볼게 없으니까 한번만 실행된다.

두번째 인자가 아예 없으면 렌더가 될때마다 실행된다.

useEffect (componentDidUpdate) 예시

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`; // CDM
		return () => console.log("unmount", count) //CWU
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

https://medium.com/@sgwanlee/useeffect의-dependency-array-ebd15f35403a

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko