반응형
목차
인풋 이벤트 핸들링
리액트에서 인풋 요소의 값은 컴포넌트의 상태(state)와 연결하여 관리한다. 이렇게 하면 사용자의 입력이 상태에 즉시 반영되어 UI가 동기화된다.
- 입력과 상태 연결: input 요소의 value 속성에는 상태 값을, onInput 또는 onChange 속성에는 상태를 업데이트하는 핸들러 함수를 연결해야 한다.
- 리액트의 onChange: 웹 표준 change 이벤트와 달리, 리액트의 onChange 이벤트는 사용자가 입력할 때마다 실시간으로 발생하여 즉시 상태를 업데이트한다.
제어 vs. 비제어
인풋 요소를 상태와 연결하는 방식에 따라 제어 인풋(Controlled Input)과 비제어 인풋(Uncontrolled Input)으로 나눌 수 있다.
- 제어 인풋(Controlled Input): 입력 값과 값 변경 모두 리액트 상태로 관리하는 방식이다. value와 onInput 또는 onChange를 함께 사용한다.
- 비제어 인풋(Uncontrolled Input): 입력 값을 브라우저가 직접 관리하며, 리액트는 관여하지 않는다. 초기값 설정에만 defaultValue 속성을 사용한다.
배열 상태 관리
리액트에서 배열 타입 상태를 업데이트할 때는 기존 배열을 직접 수정하지 않고, 항상 새로운 배열을 만들어야 한다. 이것을 불변성 유지라고 한다. 배열에 요소를 추가하거나 제거, 교체할 때 push, splice와 같이 배열을 변경하는 메서드 대신, concat, filter, map과 같이 새로운 배열을 반환하는 메서드를 사용하는 것이 좋다.
| 비선호(배열을 변경) | 선호(새 배열을 반환) | |
| 추가 | push, unshift | concat, [...arr] 전개 연산자 |
| 제거 | pop, shift, splice | filter, slice |
| 교체 | splice, arr[i] = … 할당 | map |
| 정렬 | reverse, sort | toReversed, toSorted |
오늘 하루를 돌아보며
배열 상태를 관리할 때 강사님이 "배열 상태를 업데이트 할 때 누구나 실수 할 수 있으니, 실수를 두려워 말고 반복해서 연습하는 것이 중요하다"고 하셨다. 실수를 두려워하면 안 된다! 실수를 줄이는 방법은 반복해서 연습하는 것 밖에 없다. 눈에 익히고, 손에 익혀야 한다. 실수할까봐 시도조차 하지 않는 것은 앞으로 나아갈 기회를 놓치는 것이다. 실수해야 배우고, 실수해야 나아질 수 있다. 겁내지 말고 자꾸 시도해 보고, 오히려 실수를 해보자! 그래야 더 많이 배울 수 있다!
반응형
