React Hooks

useState

//기존 방식
setState(number + 1);
//함수형
setState(() => {});
setState((currentNumber)=>{ return currentNumber + 1 });

• 기존방식 ‘배치 업데이트’ : setState가 각각 실행되는 것이 아닌 명령을 하나로 모아 최종적 한번만 실행한다. 즉 여러번 작성해도 한번만 실행된다
• 함수형 업데이트 : 명령을 모아 순차적 으로 각각 1번씩 실행시킨다.

useEffect

 useEffect(() => {
    console.log("hello useEffect");
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.
  });
<input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
/>
//input의 글자가 들어올때 마다 리 렌더링이 된다
//input값을 입력한것 뿐인데 useEffect가 계속실행 된다
//이 부분은 '의존성 배열'을 통해 해결할 수 있다

의존성 배열(dependency array)

useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

clean up

useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.
		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
}, [])

useRef

import "./App.css";
import { useRef } from "react";
function App() {
  const ref = useRef("초기값");
  console.log("ref 1", ref);
  ref.current = "바뀐값";
  console.log("ref 2", ref);
  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}
export default App;
//콘솔 결과
//ref 1 > {current: '초기값'}
//ref 2 > {current: '바뀐값'}