250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 테스트 코드 툴 비교
- 렌더링 최적화
- 리액트 메모
- 함수형 프로그래밍 특징
- 리액트 렌더링 최적화
- chromatic error
- 항해99 사전스터디
- 웹 크롤링
- 리액트
- 리덕스
- next js
- 리액트 메모이제이션
- JS module system
- 코어자바스크립트
- 항해99 미니프로젝트
- 자바스크립트 엔진 v8
- 웹팩 기본개념
- 항해99 부트캠프
- 알고리즘
- js배열 알고리즘
- FP 특징
- Js module
- this
- jwt
- 항해99
- gql restapi 차이
- toggle-btn
- 타입스크립트
- 실행컨텍스트
- v8 원리
Archives
- Today
- Total
Jaeilit
인풋 여러개 쓰기 REACT 본문
728x90
변경 전에는 useState를 반복적으로 인풋만큼 4개를 사용했다.
하지만 여러개를 하나로 압축시키는 법을 알고 나서는 하나로 썼다.
하나로 하는 방법
useState 하나에 값을 userid, username, password 등 나열한다.
이 값들은 input 의 name 속성과 일치해야 할 것이다.
그 inputvalue 들을 비구조화 할당으로 하나씩 까놓고
onChange 함수에 e.target.value 를 이용해서
e.target 또 한 까놓는다.
name과 value로
지금 그 name은 아까 인풋의 name과 일치해놓은 그 부분이고 value는 값이 된다.
바뀐 값을 받아 올 setInputValue({}) 안의 불변성을 위해서 ...inputValue를 한번 불러온 뒤에 해당 값만 덮어씌운다.
728x90
'TIL' 카테고리의 다른 글
이미지 미리보기 업로드 Axios, React (0) | 2021.11.05 |
---|---|
TIL 카카오 로그인 구현(인가코드받기) (0) | 2021.11.04 |
리액트 axios 로그인구현(Cookie 편) (0) | 2021.10.27 |
axios 리액트 카카오 로그인 구현 (0) | 2021.10.26 |
TIL 무한스크롤 구현 aixos 편 (0) | 2021.10.22 |