[React] useState

useState??

useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.

이벤트 핸들러나 다른 곳에서 호출할 수 있다.

 

아니!! 근데 이런 걸 왜 쓰는 겨??

 

state는 리액트에서 동적인 부분을 담당한다!!

컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션(상호작용)에 따라 바뀌어야 하는데 우리가 일반적으로 사용하는 

let, const 변수는 정적인 변수여서 화면에 리렌더링이 되지 않는다. 그런 상황에서 state없이 개발을 진행한다면....

어라? 전부... 정적?? 에라이 ! 와장창!!! 

 

할 수 있기 때문에 동적으로 값이 바뀌는 state를 사용한다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);
  // 새로운 state 변수를 선언하고, 0으로 초기화

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

인자로 초기 state 값을 하나 받는다. const [count, setCount] = useState(0);

이런 초기 값은 첫 번째 렌더링 시에만 사용된다.

보는 바와 같이 useState는 state 변수와 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환한다.

state 사용법!

import React, { useState } from 'react';

리액트 패키지에서 useState를 불러온다. 

 

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

첫 번째 원소는 현재 값을 가지고 있는 변수이고, 두 번째 원소는 현재 값을 벼경하기 위한 함수이다. 

 

즉, const [상태 값 변수, 상태 변경 함수] = useState(초기값); 으로 구성되어있다.

state 가져오기!

함수 컴포넌트에서 state를 어떻게 가져와야 할까??!!

<p>간단합니다. {count} 이렇게 불러오면 그만!</p>

매우 간단하다! 그냥 [count,setCount] 중 count를 사용한 된다!! (Holy!! )

state 갱신하기!

그렇다면 이 어썸한 state를 어떻게 업데이트해야 할까!!??

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

세상에! 이것마저 쉽다!!! setCount를 쓰면 아주아주 간단하게 해결된다!

state 잘 갱신하기!

자자 여기까진 잘 알겠다! 이 말이다!

근데 객체를 업데이트할 땐 어떻게 해야 하냥???

const [obj,setObj] = useState({
	first: "????",
	second: "!!!!",
});

그냥 객체를 덮어버리면 기존 값이 사라지는데??

setObj((prev) => ({...prev, third : "?!?!"}));

위와 같이 prev라는 것을 사용하면 되는데 꼭 prev일 필요는 없다. 예를 들어 pre 도 OK!

이 prev는 기존에 obj에 있는 객체를 전부 가지고 있어 spread syntax를 사용하여 추출하면 된다!