리액트로 사이드 프로젝트를 개발하던 도중 input 값을 여러 개 받아야 되는 경우가 생겼다. 해당 항목마다 state를 만들고 onChage 함수도 따로 만들어 각각 달아주는 방법도 있지만 중복 코드도 많고 쓸 데 없는 작업이 많아지기 때문에 별로 좋은 방법이라고 생각되지 않았다. 따라서 state 하나에 onChange 함수 하나를 만들어 여러개 input 값을 받는 방법을 포스팅한다.
현재 회원가입 기능 구현 중에 있는데 이렇게 아이디, 비밀번호, 이름, 학교, 부모님 이메일을 입력 받아야 한다. 즉 만약 onChange 함수를 따로 만들어주면 총 5개를 만들어야 되고 입력 받아야할 항목이 늘어날수록 코드는 기하급수적으로 늘어날 것이다. 따라서 하나의 함수로 하나의 state에 모든 값을 담아야 한다.
먼저 interface를 선언해 useState에 들어갈 타입을 명시한다.
그 다음 onChangeUserInfo 함수를 만들어주는데 이벤트의 타입은 input 입력 이벤트이기 때문에 React.ChangeEvent<HTMLInputElement로 명시해준다. 사용하는 리액트 컴포넌트 라이브러리 상 className 값을 읽어오지 못 하기 때문에 (정확히는 라이브러리에서 이미 InputText의 className을 정의를 해버렸다.) placeholder를 사용해서 구분해준다. user의 state를 선언할 때 꼭 값을 초기화를 해줄 것! 안해주면 타입 에러가 난다. 그래서
이 부분으로 값을 받은 뒤에 spread 문법으로 객체의 내용을 모두 펼쳐서 기존 객체에 복사한 뒤 입력 값을 해당 부분에 붙여주면 된다.
절대 input[name] = value 식으로 값을 바꿔서는 안된다. 그렇게 되면 값이 바뀌더라고 리렌더링이 일어나지 않기 때문!
값이 잘 들어온 것을 확인할 수 있다.
주로 백엔드 파트를 주로 맡았어서 리액트에서는 아직 부족한 부분이 많은 거 같다. 조금씩 조금씩 채워나가야지
'frontend > React' 카테고리의 다른 글
[React]React + TypeScript 시작하기 (0) | 2023.04.25 |
---|---|
[React]TS/JS 버전 에러 Type 'string' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher. (0) | 2023.04.05 |
[React]Parsing error: 'import' and 'export' may only appear at the top level. (0) | 2023.03.28 |
[React]PrimeReact (0) | 2023.03.15 |
[React]리액트란? (0) | 2023.01.15 |