React State

state란?

• Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값
  • 체크 여부에 따라 구매할 물건의 개수나 구매 금액이 변경되고, 이에 따라 사용자의 화면 또한 달라지는 상태

State hook - useState

• useState : useState 를 사용하기 위해서 React 로 부터 불러와야한다.

  import { useState } from "react";

  • useState 를 컴포넌트 안에서 호출

    • useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것

      • 변수의 이름 자유

    • state 변수는 React에 의해 함수가 끝나도 사라지지 않음

      // isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수
      
      function CheckboxExample() {
      // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 설정
        const [isChecked, setIsChecked] = useState(false); //아래 코드와 동일한 내용
      }
      
      // 위 코드와 동일한 내용
      const stateHookArray = useState(false);
      const isChecked = stateHookArray[0];
      const setIsChecked = stateHookArray[1];
      

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

    // useState 의 수도코드
    const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
    
    // useState 의 실제 코드
    function CheckboxExample() {
      const [isChecked, setIsChecked] = useState(false);
    }

• 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용

  // isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용
  <span>{isChecked ? "Checked!!" : "Unchecked"}</span>

state 갱신하기

• state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출
  • input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked 가 변경
    • 브라우저에서 checked로 값이 변경되었다면, React의 isChecked 도 변경
  • DOM 에서 input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생하고, 이벤트 핸들러 함수가 작동하는 방식과 유사

    • 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출

    • setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신

    • 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>);
      }

+)

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.
  • 컴포넌트의 상태가 변경 될 때 마다 새롭게 호출되고, 리렌더링 된다.
• React state는 상태 변경 함수(setState) 호출로 변경된다.
  • 강제로 변경을 시도X —> 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않음