일주일동안 강의를 보거나 프로젝트를 하면서 알게된 것을 적는 주말 기술 회고

useState란?

useState는 함수형 또는 클래스형 컴포넌트의 상태를 관리하고, 변경할 수 있도록 도와주는 하나의 React Hook이다.

useState는 컴포넌트에서 로컬의 데이터 상태를 관리할 수 있게 만들어 주는 기능이다.
useState는 초기 입력될 상태 값을 인자로 받아서 그 상태 값과 해당 상태값을 업데이트할 수 있는 모디파이 함수를 반환한다.

const [value, setValue] = useState(0);

value는 0을 가지게 된고 setValue를 통해서 value값을 조정할 수 있다.

useState의 힘

useState는 React개발에 여러 가지 이점을 제공한다.

• 함수형 컴포넌트에서 상태 관리를 간소화한다.
• 하나의 컴포넌트에서 여려 개의 상태 변수를 가질 수 있다.
• 상태를 다시 렌더링할 때 이전 상태를 유지한다.
• 상태가 변경될 때만 다시 렌더링을 트리거 한다.

useState의 동작 원리

useState는 컴포넌트 상태를 추적하기 위해 fiber라는 데이터 구조를 사용한다. 상태 변수가 업데이트되면, React는 새로운 상태와 이전 상태를 비교하고 다시 렌더링이 필요한지 여부를 결정하고, 다시 렌더링이 필요한 경우, React는 가상 DOM을 업데이트하고 실제 DOM에 필요한 변경 사항을 적용한다.

성능 고려 사항

아직 React를 깊게 해보지 않아 잘 모르지만, 일단 나중에 도움이 되기 위해 적어보겠다.

• 루프나 조건문 내부에 useState를 사용하지 않도록 한다.
• useEffect 훅을 사용해서 상태 업데이트를 최적화하는 것을 고려합니다.
• 이벤트 핸들러를 메모이제이션하기 위해 useCallback훅을 사용합니다.

useState와 관련된 일반적인 실수

• 상태를 업데이트 할 때 useState에서 반환된 함수를 호출하는 것을 잊는 경우
• useState 호출에서 동일한 상태 변수 이름을 사용하는 경우
• useState에 초기값을 제공하지 않는 경우

마무리

여기까지 useState가 무엇인지 알아보고, 다양한 부분을 알게되었다.
성능 고려 사항과 일반적인 실수들은 이번 숙지하여 잘 지켜보자.

출처

• 출처 1
• 출처 2