[React Hooks] useState

 이번 글은 'Reack Hooks in Action'의 'Chapter 2. Managing component state with the useState Hook'의 내용을 요약 정리한 것입니다.

---

들어가며

• useState를 호출하여 React에게 컴포넌트 state의 값을 관리할 것을 요청한다.
• updater 함수를 통해 state의 값을 바꾸고 리렌더링을 일으킨다.
• 새로운 state의 값을 생성하기 위해 이전 state를 활용한다.
• 여러 state의 값을 관리한다.
• React와 컴포넌트가 어떻게 state를 유지하고 갱신하는지, 그리고 state와 UI가 동기화하는지 고려한다.

---

Class 컴포넌트에서 useState를 쓸 때

 

this.setState에 새로운 state를 입력하면 React가 알아서 이전 state와 새로운 state를 합쳐준다.

 

Function 컴포넌트에서 useState를 쓸 때

 

 위와 같이 적게 되면 이전 state에 있던 group 프로퍼티는 날아간다. 따라서 object 형식으로 staste를 관리해줘야 한다. 이때 주의할 점은 다음과 같이 updater 함수를 선언할 때 스프레드 연산자(...)로써 이전 상태를 복사해줘야 한다는 점이다.

 

---

Function 컴포넌트 개념 다지기

• 컴포넌트는 props를 받고 UI를 반환하는 함수이다.
• React는 컴포넌트를 불러온다. 컴포넌트는 함수이므로 코드를 실행한 뒤 종료된다.
• 몇몇 변수들은 이벤트 핸들러에 의해 생성된 클로저 내에 계속 존재하거나 함수가 종료될 때 없어진다.
• updater 함수를 활용하여 React에게 변경된 값을 알려줄 수 있다. 이로써 최신 UI를 얻기 위해 컴포넌트를 재실행한다.

 

---

요약

• 컴포넌트에 쓰이는 값을 관리하고 싶을 때 React의 useState Hook을 호출한다. useState는 state 값과 updater 함수라는 두 요소를 가지는 배열을 반환한다. 필요하다면 초기값을 설정한다.

• 초기값을 생성하기 위해 복잡한 계산이 필요하다면 useState에 함수를 전달할 수 있다. React는 'lazy initial state'를 얻으려 컴포넌트를 처음으로 호출할 때에만 함수를 실행할 것이다.

• 새 값을 설정하기 위해 useState가 반환하는 updater 함수를 활용한다. 새 값을 이전 값을 대체한다. 값이 바뀌면 React는 리렌더링을 준비한다.

• state 값이 object일 경우, updater 함수가 프로퍼티의 일부만을 바꿀 때 이전 state에서 바뀌지 않은 값을 빼먹지 말고 복사해야 한다.

• updater 함수를 호출할 때 최신 값으로 작업하는지 확인해야 한다. 그리고 이전 값에 기반한 새 값을 설정해야 하고, 함수를 updater 함수의 인자로 전달한다. Reawct는 최신 state 값을 함수의 인자로 전달할 것이다.

• 관리해야 할 state가 여러 개라면 useState를 여러 번 호출 가능하다. React는 호출 순서를 파악하여 알맞은 변수에 값과 updater 함수를 할당한다.

• React는 state와 UI를 동기화하는 작업을 수행한다.