[react 리액트] 타입별 State 다루기 (number, string, boolean 타입)

 

 

1. 들어가며

1) setter 함수에 인자로 어떤 타입이 들어가냐에 대한 내용이다.

2) 그 중에서도 가장 기초적인 number, string, boolean 타입이 들어간 경우를 살펴본다.

 

 

 

2. input 태그를 활용하여 타입별 state 다루기

1) type 프로퍼티로 입력 받을 값의 타입을 정해준다.

2) value 프로퍼티의 값을 state 값으로 연결한다.

3) 값이 변할 때마다 감지하도록 onChange 이벤트 핸들러를 넣고
setter 함수로 state 값을 업데이트한다.

 

 

 

📌 Number 타입으로 선언해보면 이런 모양이다.

function App() {

 //Number
  const [num, setNum] = useState(0);

  return (
    <div className="App">
      <p>숫자</p>
      <input
        type='number'
        value={num}
        onChange={(e)=>setNum(e.target.value)}
      />)}

 

 

 

📌여기서 onChange 해설 onChange={(e)=>setNum(e.target.value)}

e는 이벤트 객체를 나타내는 변수입니다. (event 의 약자) 이벤트 객체에는 이벤트가 발생한 요소 및 해당 요소에 대한 추가 정보가 포함되어 있습니다.
e.target은 이벤트가 발생한 요소를 나타냅니다. 예를 들어, <input> 요소에서 onChange 이벤트가 발생하면 e.target은 해당 <input> 요소를 가리킵니다.
따라서 코드에서 e.target.value는 이벤트가 발생한 요소의 값에 해당합니다. 예를 들어, <input> 요소에서 값을 변경할 때마다 e.target.value는 해당 입력 필드의 현재 값을 나타냅니다.
따라서 onChange 핸들러 내에서 e.target.value를 사용하여 입력 필드의 변경된 값을 가져와서 setNum 함수를 사용하여 num 상태를 업데이트하는 것이 이 코드의 목적입니다.

 

 

 

3.  Number, String, Boolean 타입 모두 다뤄보자.

function App() {

  //Number

  const [num, setNum] = useState(0);

  //String

  const [str, setStr] = useState('');

  //Boolean

  const [isChecked, SetIsChecked] = useState(false)

  return (

    <div className="App">

      <p>숫자</p>

      <input

        type='number'

        value={num}

        onChange={(e)=>setNum(e.target.value)}

      />

      <p>텍스트</p>

      <input

        type='text'

        value={str}

        onChange={e => setStr(e.target.value)}

      />

      <p>불리언</p>

      <div>

        <input

          type='checkbox'

          value={isChecked}

          onChange={(e) => SetIsChecked(e.target.checked)}

        />      

        {isChecked ? <span>체크됨</span> : <span>체크안됨</span>}

      </div>

    </div>

  );

}

 

📌여기서 잠깐!

- 숫자, 텍스트는 setter 함수의 인자로 (e.target.value)를 받고 있는데 불리언은 (e.target.checked)를 받고 있다. 왜?

 

체크 박스의 value 속성은 체크 박스가 선택될 때의 '값'을 나타냅니다.
예를 들어, value 속성이 "male"로 설정되어 있다면, 체크 박스가 선택될 때 해당 값을 가져올 수 있습니다.

반면에 checked 속성은 체크 박스의 선택 상태를 나타냅니다. checked 속성에는 true 또는 false 값을 할당하여 체크 박스를 선택하거나 선택 해제할 수 있습니다.

따라서, onChange 이벤트 핸들러에서는 e.target.checked를 사용하여 체크 박스의 실제 선택 상태를 가져와야 합니다. 이 값은 true 또는 false가 됩니다.

 

 

 

이렇게 useState로 input에 담긴 최신 값을 업데이트할 수 있고 여기에 업로드 버튼 같은 걸 구현하면 post로 서버에 최신 입력 값을 보내줄 수 있다.