728x90
반응형
useState
React에서 '상태'라는 개념은 단순한 변수처럼 보이지만 다름.
useState로 선언한 값은 내부적으로 상태가 바뀔 때마다 컴포넌트를 리렌더링하게 되어 있음.
일반 변수(let 등)는 값이 바뀌어도 화면은 바뀌지 않음.
반면 useState는 setter 함수(setX)로 값을 바꾸면, React가 다시 렌더링을 해서 UI에 반영됨.
→ 핵심:
값 + 그 값이 바뀌었을 때 컴포넌트를 다시 그려줄지 말지를 React가 관리해주는 구조
또한, React는 상태의 불변성을 중요하게 다룸.
그렇기 때문에 항상 새로운 값을 만들어서 넘겨주는 식으로 상태를 업데이트해야 함.
(ex. 배열이나 객체 수정 시 원본을 바꾸는 게 아니라 복사본 만들어서 set해주기)
useRef
useRef는 값을 저장할 수 있지만, 리렌더링을 유발하지 않음.
따라서 useState처럼 화면이 다시 그려질 필요 없는 정보(ex. 이전 값 기억, 타이머 ID 등)를 저장할 때 사용하면 됨.
useEffect
useEffect는 컴포넌트가 렌더링되거나 특정 상태가 바뀔 때 동작하는 훅.
의미상 부수 효과(side effect)라는 말처럼, 렌더링 외의 동작을 넣을 때 사용.
(ex. API 호출, 로컬 스토리지 저장, 이벤트 리스너 등록 등)
useEffect(() => { // 어떤 상태가 바뀔 때 동작시킬 코드 }, [someState]);- [] 안에 상태를 지정하면, 그 상태가 바뀔 때만 실행됨.
- 빈 배열 []이면 최초 마운트 시에만 실행됨.
- 아예 배열을 안 넣으면, 렌더링마다 매번 실행됨 → 거의 안 씀.
내가 겪은 상황 (중요)
- useEffect를 여러 개 쓰고 상태들을 세세하게 나눴을 때
→ 리렌더링이 많아지고, 초기 렌더링/로딩 속도가 체감될 정도로 느려졌음. - 결국 꼭 필요한 상태만 의존성에 넣고, 나눌 필요가 없는 건 하나로 묶는 게 나았음.
기억할 것 (짧게 요약)
- useState: 상태 바뀌면 리렌더링됨
- useRef: 값은 유지되지만 리렌더링 안 됨
- useEffect: 상태 바뀔 때마다 실행되게 할 수 있음
- 상태는 항상 불변성 유지 (기존 값 직접 변경 ❌)
참고 링크
728x90
반응형
댓글