React JS useState 안티패턴
깨끗한 React 코드를 작성하려면 스마트한 상태 관리가 필요합니다. 잘못된 상태 패턴은 버그와 복잡한 코드를 유발합니다.
다음 네 가지 흔한 실수를 피하세요:
- 관련 데이터 그룹화하기
함께 변경되는 값들에 대해 별도의 state hook을 만들지 마세요.
다음 대신:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
객체를 사용하세요:
- const [position, setPosition] = useState({ x: 0, y: 0 });
이렇게 하면 업데이트를 깔끔하고 체계적으로 유지할 수 있습니다.
- 충돌하는 상태 피하기
여러 개의 불리언(boolean) 값이 동일한 프로세스를 추적하면 버그가 발생할 수 있습니다.
다음과 같이 사용하는 대신:
- isSubmitting
- isSubmit
단일 상태 문자열을 사용하세요:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
이 단일 진실 공급원(single source of truth)으로부터 UI 로직을 도출하세요.
- 불필요한 상태 제거하기
렌더링 중에 값을 계산할 수 있다면, 이를 state에 넣지 마세요.
다음은 저장하지 마세요:
- firstName
- lastName
- fullName
성(first name)과 이름(last name)만 저장하세요. 전체 이름(full name)은 즉석에서 계산합니다:
- const fullName = firstName + " " + lastName;
또한, props를 state에 저장하지 마세요. state는 한 번만 초기화됩니다. prop이 변경되어도 state는 업데이트되지 않습니다. prop을 직접 사용하세요.
- 데이터 중복 방지하기
동일한 데이터를 두 개의 서로 다른 state에 저장하지 마세요.
작업 목록(list of tasks)과 선택된 작업(selected task)이 있는 경우, 두 곳 모두에 전체 작업 객체를 저장하지 마세요. 이는 업데이트를 어렵게 만듭니다.
대신:
- 작업 목록을 저장합니다.
- selectedTaskId만 저장합니다.
- 렌더링 중에 해당 ID를 사용하여 목록에서 작업을 찾습니다.
이렇게 하면 선택된 작업이 항상 목록의 최신 데이터와 일치하도록 보장할 수 있습니다.
출처: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9