State

state

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

 

 

State hook, useState

 

useState 사용법

 

1. useState 함수 불러오기

- React로 부터 useState를 불러와야 함

- improt 키워드로 useState를 불러옴

import { useState } from "react";

 

2. useState 컴포넌트 안에서 호출 하기

- useState를 호출한다는 것은 'state'라는 변수를 선언한는 것과 같다 

- 이 변수의 이름은 아무 이름으로 지어도 됨 

- 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않음 

## useState 구조 분해 할당 예시

function CheckboxExampe() {
  //새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라고 부르기로 함 
  // 1번 코드를 풀어 스면
  const [isChecked, setIsChecked] = useState(false); // 1번
  
  // ...
  
  // 2번 코드와 같습니다
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

- useState를 호출하면 배열을 반환하는데

- 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수

- useState 의 인자로 넘겨주는 값은 state의 초깃값

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

function CheckboxExample() {
  const [isChecked, setIsCheked] = useState(false);
  
## 예시 대입 시 
 - isCheked : state를 저장하는 변수
 - setIsCheked : state isChecked를 변경하는 함수
 - useState : state hook
 - flse : state 초기값

 

 

3. state 변수에 저장된 값 사용 → JSX 엘리먼트 안에 직접 불러서 사용

- 예시에서는 isChecked가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항 연산자 사용 

## JSX에서 삼항연산자 사용 예시
<span>{isChecked ? "Checked!" : "Unchecked"}</span>

---

state 갱신하기

 

1. state를 갱신하려면 state 변수를 갱신할 수 있는 함수를 호출

- 위의 예시에선는 setIsChecked를 호출

- 이번 예시의 경우, input[type=checkbox] JSX 엘리먼트의 값의 변경에 따라서 isChecked가 변경되어야 함

 

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

 

3. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExmple 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 함

## 완성된 체크박스 컴포넌트 예시
function CheckboxExmple() {
  const [isCheked, setIsChecked] = useState(false);
  
  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };
  
  retrun (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!" : "Unchecked"}</span>
    </div>
  );
}

---

주의점 

 

- React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 됨

- React state는 상태 변경 함수 호출로 변경해야 함, 강제로 변경을 시도 하면 안됨