React - 입력 처리하기

리엑트에서 값을 저장하고 사용하기 위해서 사용하는 것은 useState()를 사용하는 것이다.

useState는 리엑트에서 지원하는 라이브러리로 편리하게 사용할 수 있다.

import {useState} from 'react';

const [count, setCount] = useState(1);

위의 코드 처럼 비구조 할당 방식을 사용하여 선언을 해주면 되며
첫 번째에는 값을 사용할 변수같은 개념으로 생각하면 되거, setCount는 함수형식으로 setCount()로 사용하여 괄호 안에 데이터를 넣어 값을 수정 할 때 사용한다.
초기값은 오른쪽의 useState()내부에 값을 삽입하여 사용할 수 있고 내부에는
문자, 숫자, 객체형등 많은 것들을 삽입 할 수 있다.

리엑트 입력 처리하기

리엑트에서 입력을 처리할 때 떠오르는 방식은 useState를 사용하는 방식이다.
이것을 사용하여 input을 통해 사용하면 되겠다.

	<input value={count} onChange={(e)=>setCount(e.tartget.value)}}/>

위의 방식처럼 사용하면 되는데, onChange라는 이벤트 함수를 통해 값을 최신화 시켜주면된다. onChange를 사용하면 e라는 객체가 반환되는데, 이것은 사용자가 입력을 했을 때의 정보를 전달하게 된다.

리엑트 DOM 조작하기

리엑트에서 요소들을 사용한 작업을 하고 싶은 경우에는 useRef()를 사용하면 DOM을 조작할 수 있다.
만약 상단에서 명시한 input 요소를 조작하고 싶을 때는 이렇게 사용하면된다.

	const countInput = useRef();

	return(
      <div>
        <input ref={countInput} value={count} onChange={(e)=>setCount(e.tartget.value)}}/>
      </div>
    )

이후 현재 countInput이 지정한 요소를 컨트롤 할 때에는

countInput.current.동작

위 의 코드처럼 사용하면 된다.