React Hook 함수 정리 - 1

useState()

• 컴포넌트 생성 시 대부분의 확률로 state값을 관리해야하는 상황 발생!
• react 기본 내장 함수로 UI화면에서 상태변화가 발생되는 요소(state)를 관리하는 변수 및 함수 관리
• react는 가상돔을 사용하기 때문에 상태변화가 발생되는 요소는 state라는 변수 안에 담아서 관리해야함
• 가상돔은 일반 변수를 사용하지 않음
• useState()는 state라는 변수와 setState()함수 2개를 반환
• setState()만이 유일하게 state변수를 제어 가능

최초 로드시 : import를 통해 호출

import React from "react"

선언

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

• 초기값은 설정하고 싶은 state에 따라 설정 가능 (객체, 숫자, 문자, etc...)
• "초기값" = 최초 state의 값

*state와 setState는 사용자와 상황에 맞게 변동 가능 (하지만 직관적으로 선언할 것)

ex

const [diary, setDiary] = useState("");
const [sortedData, setSortedData] = useState(0);

---

onClick 이벤트에 따른 setState로 state 상태 관리

const Body = () => {
  const [number, setNumber] = useState(0);

  const onDecrese = () => {
    setNumber(number - 1);
  };
  const onIncrese = () => {
    setNumber(number + 1);
  };
  return (
    <div>
      <h2>{number}</h2>
      <Viewer number={number} />
      <div>
        <button onClick={onDecrese}>-</button>
        <button onClick={onIncrese}>+</button>
      </div>
    </div>
  );
};

onDecrese, onIncrese 함수를 통해 number의 상태 관리를 통한
출력되는 number가 증감

---

복수의 state도 관리 가능

state에 다수의 키도 포함 가능

  const [state, setState] = useState({
    name: "",
    gender: "",
    birth: "",
    text: "",
  });

console.log(state.name)
console.log(state.gender)

온점표기법으로 state에 호출 가능

---

이전 state 기반으로 함수 호출하기

function() {
	setState(state + 1)
    setState(state + 2)
    setState(state + 3)
}

console.log(state)

==> state + 3

비동기적방식으로 진행되어 최종 실행값인 state+3만 실행됨

function() {
	setState(() => state + 1)
    setState(() => state + 2)
    setState(() => state + 3)
}

console.log(state)

==> state + 6

콜백함수를 이용하여 대기중인 state를 가져와서 다음 state를 실행