목차
함수형 컴포넌트의 상태
함수형 컴포넌트의 상태(State) 관리
함수형 컴포넌트는 useState 훅을 사용하여 상태를 관리한다. useState는 배열을 반환하며, 첫 번째 값은 현재 상태 값, 두 번째 값은 상태를 업데이트하는 함수다. 배열 구조 분해 할당을 사용하면 아래와 같은 형태로 간편하게 선언할 수 있다.
const [state, setState] = useState(초기값)
상태 업데이트와 렌더링
상태를 업데이트하려면 setState 함수에 새로운 값을 전달해야 한다. setState가 실행되면 리액트는 해당 컴포넌트를 다시 렌더링한다.
리액트의 렌더링 과정은 다음 3단계로 이루어진다.
- 렌더 트리거: 초기 렌더링이 일어나거나 setState가 호출될 때 시작된다.
- 컴포넌트 렌더링: 리액트가 컴포넌트 함수를 다시 호출해 새로운 UI를 준비한다.
- DOM 커밋: 리액트가 이전 렌더링 결과와 비교하여 변경된 부분만 실제 DOM에 적용한다.
상태를 업데이트할 때는 다음과 같은 사항들을 주의해야 한다.
- 비동기 처리: setState는 비동기로 작동하기 때문에 상태를 여러 번 연달아 업데이트하면 마지막 값만 반영될 수 있다. 이전 상태를 기반으로 업데이트하려면 함수형 업데이트를 사용해야 한다.
setState((이전값) => 이전값 + 1)- 객체 상태: 여러 값을 하나의 객체로 관리할 때는 기존 값이 사라지지 않도록 객체 전개 구문을 사용해야 한다.
setState({
...state, // 전개 구문
키: 값
})
상태를 끌어올려 공유
리액트에서 여러 컴포넌트가 같은 데이터를 사용해야 할 때 상태 끌어올리기(Lifting State Up)는 가장 기본적이고 효과적인 방법이다.
각 컴포넌트가 독립적으로 상태를 관리하면 데이터가 서로 달라질 수 있고, 동기화가 어렵다는 문제가 있다. 이럴 때 데이터를 사용하는 컴포넌트들의 공통 부모 컴포넌트로 상태를 옮기고, 부모 컴포넌트의 상태를 하위 컴포넌트들에게 속성(props)으로 전달하면, 모든 컴포넌트가 동일한 데이터를 공유하게 된다.
하위 컴포넌트에서 상태를 변경해야 할 때는 속성(props)으로 전달받은 업데이트 함수를 호출해서 부모의 상태를 변경해야 한다. 이 방식은 데이터 흐름을 명확하게 하고 예측 가능한 UI를 만든다.
오늘 하루를 돌아보며
함수형 컴포넌트에서 상태를 관리할 때 신경써야 할 것들이 있다. 대부분의 경우 상태는 여러 상태로 나누어 관리하는 것이 좋다. 객체 상태는 모든 값이 동시에 변경되어야 할 때만 사용하는 것이 좋다. 그리고 마지막으로 상태 업데이트가 이전 값에 따라 달라져야 할 때는 함수형 업데이트를 사용해야 한다.
상태를 끌어올리는 방법은 데이터 동기화가 필요할 때 필수적일 것 같다. 리액트의 작동 방식에 익숙해질 필요가 있다는 생각이 많이 드는 하루였다. 그러기 위해서는 공식 문서도 많이 읽어보고, 강의 내용도 충분히 복습해야겠다. 수업 시간에 작성했던 코드를 혼자서 다시 작성해 보는 것도 도움이 될 것이다. 오늘 저녁에는 예습보다는 복습에 더 집중해야겠다!
