[ React 기초 ] State 알아보기

State 알아보기

---

State 란 ?

• 컴포넌트 내부에서 변할 수 있는 값
• 애플리케이션의 상태라고 할 수 있다.
  쇼핑몰 장바구니를 예시로 들어보면, 장바구니내에서 체크 된 상태와 체크 되지 않은 상태로 상태를 구분할 수 있다.

State hook, useState

•  useState는 React에서 state를 다루는 방법 중 하나이다.

useState 사용

1. 사용 할 파일내에서 react에서 useState를 import 해야 한다.

import { useState } from "react";

 

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

 

1. 수도 코드

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

2. 문법 예시

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
}

isChecked : state를 저장하는 변수
setIsChecked : state isChecked 를 변경하는 함수
useState : state hook
false : state 초기값

• isChecked, setIsChecked는 useState 리턴 값을 구조 분해 할당한 변수이다.
• 새로운 state 변수를 선언, 배열 안에 변수 이름은 아무 이름으로도 가능
• state 변수는 React에 의해 함수가 끝나도 사라지지 않음

 

위 코드를 풀어서 쓰면 아래 코드와 같음

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

 

state 갱신

import React, { useState } from "react";

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 ? 'Myossi Bye !!' : "Myossi Hi !!"}</span>
    </div>
  );
}

export default CheckboxExample;

간단 설명

• 핵심 : state를 갱신하려면 state 변수(isChecked)를 갱신할 수 잇는 함수인  setIsChecked를 호출해야 한다.
•  CheckboxExample 컴포넌트에서  input 체크 박스를 만들어서 isChecked 값 변경에 따라 브라우저에서 보이는 글자가 바뀌고 있는 것을 알  수 있다.

 

풀어서 보자

 

useState로  isChecked 변수에 초기값으로 false를 주고 있는 code

  const [isChecked, setIsChecked] = useState(false);

체크 박스를 만들고 checked에 isChecked를 주면 브라우저에는 체크박스에 체크가 안된 상태로 보이게 된다.

체크 박스의 값이 변경 되면 onChange 이벤트를 발생시키고 handleChecked 함수가 작동 된다.

 <input type="checkbox" checked={isChecked} onChange={handleChecked} />

체크 박스의 값이 변경 되면 onChange 이벤트를 발생시키고 handleChecked 함수가 작동 된다.

setIsChecked 함수에 체크 결과 값을 넣어서 isChecked 변수를 갱신한다.

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

span 태그 안에 삼항 연산자를 통해 isChecked 값에 따라
체크가 되있다면 'Myossi Bye !!' , 체크가 안되어있다면  "Myossi Hi !!"를 브라우저에 출력한다.

<span>{isChecked ? 'Myossi Bye !!' : "Myossi Hi !!"}</span>

 

주의 사항

• React state는 강제로 변경을 시도하면 안되고 상태 변경 함수 호출로 변경해야 함
• 강제로 변경을 시도하면 리렌더링 및 state변경이 되지 않는다.

예시 : state.push(1);, state[1] = 2;, state = 'wrong state';