setNames([...names, name])
위 코드는 names 배열의 현재 상태를 직접 참조하여 업데이트합니다. 이 방법은 일반적으로 문제가 되지 않지만, 이전 상태와 새로운 상태 간의 연관성이 중요한 경우나 복잡한 상태 업데이트 로직에서는 예상치 못한 결과를 초래할 수 있습니다. 이는 React의 비동기 상태 업데이트 때문입니다.
setNames((prev) => [...prev, name])
위 코드는 함수를 인자로 받아 이전 상태를 기반으로 새로운 상태를 계산합니다. 이 방법은 React가 상태 업데이트를 비동기로 처리할 수 있도록 보장하므로, 항상 최신 상태를 기반으로 새로운 상태를 계산할 수 있습니다. 따라서 이전 상태와 새로운 상태 간의 연관성이 중요한 경우에는 이 방법을 추천합니다.
따라서, 두 방식 모두 상황에 따라 적합할 수 있으나, 일관성을 유지하고 싶다면 후자의 방식, 즉 함수를 사용한 상태 업데이트를 추천드립니다.
'React' 카테고리의 다른 글
| 모듈 export 2가지 방법 (0) | 2023.06.11 |
|---|---|
| useState vs useReducer (0) | 2023.06.10 |
| useMemo vs useCallback (0) | 2023.06.10 |
| onClick= {함수명} VS onClick= {함수명()} VS onClick = { ()=>함수명()} (0) | 2023.05.20 |
| useState의 초기값은 콜백함수로 설정하자 (1) | 2023.05.19 |