[React] state에 키보드 타이핑 값 받기

정(JJeong)·2022년 10월 22일

React 셀프리뷰

리액트, 씹고 뜯고 맛보고 즐기기.

목록 보기

13/22

해당 시리즈의 포스트는 개념 및 이론 정리와 개인적인 코딩 기록이 혼용되어 포스팅됩니다. 참고 부탁드립니다.

Netflix 클론 사이트를 만들면서 DB에서 영화정보를 검색해서 나타나는 기능을 구현하고 있었다.

검색창

그러다가 키보드 타이핑 값을 받는 코드를 나중에도 참고하게 기록해두고 싶었다.
왜냐하면 이전에도 Todo List만들 때도 사용하고, 그 외 게시판 기능을 만들 때도 사용했었는데, 기록을 안해두니 막상 또 쓰려고 할 때 ' 아... 머였드라! ' 하게 되기 때문;;

분명 자주 쓰는 코드이니 기록해두면 좋겠지.

역시 기억보단 기록이 짱이다.

👀 타이핑 값을 어떻게 받을까?

기능을 구현하기 위해 hooks로 state값을 저장할 곳을 만들고, 이 state에 input으로 입력값을 받을테니 이곳에 이를 구현시킬 함수를 연결해야 한다.

이를 다시 정리해보면 필요한 것은 대략 아래 세가지이다.

타이핑을 할 input태그
타이핑 값을 받아줄 state, 이는 useState hook을 사용하자.
마지막은 타이핑 값을 받고, 이를 state값으로 들어가도록해줄 함수를 연결하고 생성해주자.

🔌 코드 작성

코드는 react의 함수형 컴포넌트 상에서 작성되었습니다.

export default function Search() {
  const [searchValue, setSearchValue] = useState("");
  
  const handleChange = (e) => {
    setSearchValue(e.target.value);
  };
  
  return (
    <input
  		value={searchValue}
  		onChange={handleChange}
	/>
  )
}

위를 보면 searchValue라는 state와 이를 관리해줄 setter함수를 useState를 이용해 만들었다. 그리고 이 초기값은 ""로 설정한다.

그리고 input에는 value로 state값이 들어가도록 했다.

마지막으로 가장 중요한 타이핑값을 받아주기 위한 함수로 handleChange를 만들었다.
여기서 e는 event를 의미한다. 그리고 이를 받아서 e.target.value를 작성하면 이것이 우리가 타이핑한 value값이 된다.
그래서 handleChange함수 안에서 setter인 setSearchValue안에 이 값을 넣어 state로 담아주는 것이다.

끝이다.
보다시피 생각보다 별거없다..ㅎㅎ 물론 이 값을 path로 연결하고~ 값을 넘기고~ 등등의 것들을 하려고 한다면 다른 과제가 생기겠지만, 일단 지금 알고자 하는 것은 타이핑 값을 받는 것이니까.