state

state: 컴포넌트내에서 변할수있는값

리액트에선 자주 바뀌는 중요한 데이터를 변수말고 state로 저장해서 써라!!

state는 변경되면 HTML이 자동으로 재렌더링이 된다(HTML이 새로고침없이도 스무스하게 변경됨)

 

<useState>

#state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다.

#useState를 이용하기 위해서는 react로부터 useState를 불러와야한다.

import { useState } from "react";

import React, { useState } from "react";

#이후 useState를 컴포넌트 안에서 호출해준다. 호출해준다는건 state라는 변수를 선언하는 것과
같으며, 변수의 이름은 아무이름이나 상관없다. 일반적인 변수는 함수가 끝날때 사라지지만,
state변수는 react에 의해 함수가 끝나도 사라지지 않는다.
아래 예시의 isChecked, setIsChecked는 useState의 리턴값을 구조분해 할당한 변수이다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);    //호출을 해서 배열을 반환!
}

위의 코드는 밑의 코드를 구조분해할당한것이다.

 const stateHookArray = useState(false);
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];

#useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state변수이고, 1번째요소는 이 변수를 갱신할수있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초기값이다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

# isChecked: state를 저장하는 변수
setIsChecked: state isChecked를 변경하는 함수 (갱신함수)
useState: state hook
false: state초깃값

 

#이 state 변수에 저장된 값을 사용하려면 JSX element 안에 직접 불러서 사용하면 된다. 여기서는 isChecked가 boolean값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용한다.

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

<주의점>

-react컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.
-react state는 상태 변경 함수 호출로 변경해야한다. 강제로 변경을 시도하면 안된다. 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.

---

<state 갱신하기>

#갱신하려면 갱신할수있는 함수인 setIsChecked함수를 호출해야한다.

#사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트핸들러함수인 handleChecked를 호출하고, 
이함수가 setIsChecked를 호출하게 된다.
setIsChecked가 호출되면 호출된 결과에 따라 isChecked변수가 갱신되며, 
react는 새로운 isChecked변수를 CheckboxExample컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링한다.

function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false); //사용자가 체크박스값을 변경하면 여기서 다시 렌더링된다.

const handleChecked = (event) => {
setIsChecked(event.target.checked);
};

return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}