[React - 6] useState

State

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

---

사용법 예시

useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 합니다. 

import 키워드로 useState 를 불러옵시다.

import { useState } from "react";

---

다음은 useState를 수도 코드로 작성한 것이다.

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

---

변수의 이름은 아무 이름으로 지어도 됩니다.

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

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
}

1. isChecked : state를 저장하는 변수
2. setIsChecked : state isChecked 를 변경하는 함수
3. useState : state hook
4. false : state 초깃값

---

useState를 이해하기 위해 다음 예제를 따라해 봅시다.

 

1. state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출합니다.

 

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

이 함수가 setIsChecked 를 호출하게 됩니다.

 

3. 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>
  );
}

 

함수를 만들고, button 의 onChange 으로 각 함수를 연결해주었습니다. 

여기서 잠깐! 리엑트에서 자바스크립트 이벤트를 쓸 때는 camelCase 형태로 작성 해야만 합니다.

 

리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해주어야 합니다.

여기서 주의해야 할 점은, 함수형태를 넣어주어야 하지, 함수를 다음과 같이 실행하시면 안됩니다.

onChange={handleChecked()} // 불가능

위처럼 하면 렌더링되는 시점에서 함수가 호출되버리기 때문입니다. 

이벤트를 설정할때에는 함수타입의 값을 넣어주어야 한다는 것, 주의해주세요.

onChange={handleChecked} // 가능!
onChange={() => handleChecked()} // 가능!

---

주의 사항

1. React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 됩니다.

2. React state는 상태 변경 함수 호출로 변경해야 합니다.

3. 상태 변경 함수 없이 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않습니다.

const[state, setState] = useState([])

state.push(1) // setState를 사용해야한다.
state[1] = 2 // setState를 사용해야한다.
state = 'wrong state' // setState를 사용해야한다.

---

응용 예제 (input 양쪽 상태 관리 하기)

import React, { useState, useRef } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;