상태 관리 ( State Management )
상태(state)는 UI에 동적으로 표현될 데이터이다. 동적이란 뜻은 브라우저(client side)와 유저간에 어떠한 interaction을 통해 상태가 변경될 수 있다는 것을 의미한다
ex) 체크 박스에 check/none
토글 스위치를 클릭하는 경우 on/off로 상태가 바뀜).
1. Side Effect란?
Side effect란 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인을 뜻한다. 우리가 리액트를 가지고 웹개발을 하면 컴포넌트를 만들게 되는데 이 컴포넌트들이 모여서 하나의 웹 페이지를 구성하게 된다. 이때 화면에 보여지는 컴포넌트를 presentation 컴포넌트라고 하는데 이 컴포넌트는 굳이 서버에서 데이터를 fetch하지 않고도 하드 코딩된 가짜 데이터를 가지고도 화면에 우리가 원하는 모습을 띄워야 한다. 그래서 보통은 우리가 presentation 컴포넌트를 만들면 바로 서버에서 데이터를 가져오는 것이 아니라 먼저 가짜 데이터를 삽입해 우리가 원하는 모습이 나오는지 확인을 하게 된다.
ex) sprint-recast 진행시, fakeData
우리가 앱을 만들다보면 서버에서 데이터를 가져와야 할 때가 있다. 만약 데이터를 가져오는데 조금 시간이 걸린다면 side effect가 불가피하게 발생할 때가 있는데 이럴땐 화면에 "로딩 중"이라는 메세지를 띄워 유저에게 현재 상태를 알릴필요가 있다.
2. 상태 관리
상태에는 두 가지가 있다. 특정 컴포넌트에서만 쓰이는 로컬 상태(state)와 우리가 만든 웹이나 앱 전체에 걸쳐 쓰이는 전역 상태(state)이다. 보통 전역 상태는 여러 컴포넌트들에서 쓰이기 때문에 이 컴포넌트들을 자식으로 갖고 있는 부모 컴포넌트에서 상태 관리를 해준다.
( 데이터는 위에서 아래로~ )
1) 로컬 상태
로컬 상태는 특정 컴포넌트 내에서만 쓰이고 다른 컴포넌트에는 영향을 끼치지 않는다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태라고 보면 된다. 폼 데이터는 input box, select box 등과 같이 유저로 부터 입력값을 받는 것이라고 생각하면 된다.
2) 전역 상태
우리가 만든 웹이나 앱 전체에 걸쳐 쓰여지는 상태를 뜻한다. 서버로 부터 데이터를 불러올 때 시간이 지연되는 경우 화면에 띄워지는 "로딩 중"이라는 상태 역시 앱 전체에 영향을 미치는 전역 상태라고 할 수 있다.
서로 다른 컴포넌트가 동일한 상태를 다룰 때는 항상 같은 출처에서 상태를 가져와야 한다. 만약 서로 다른 컴포넌트 A와 B가 동일한 상태를 다루는데 A는 원본을 가져오고 B는 사본을 가져오면, A에서 상태에 변화가 생길 경우 B가 참조하는 사본도 이에 맞춰 변화해야 한다. 이때 A가 참조하는 상태와 B가 참조하는 상태의 동기화(sync) 작업이 불가피한데, 이는 앱이나 웹 개발을 더 어렵게 만들기 때문에 지양하는 것이 좋다. 따라서 컴포넌트 A와 B가 만약 동일한 상태를 다루면 둘 다 하나의 출처에서 상태를 가져오는 것이 좋다.
데이터 무결성을 위해 동일한 데이터는 항상 같은 출처에서 가져오는 것이 좋다. Single source of truth(신뢰할 수 있는 단일 출처)는 프론트 엔드 분야 뿐만 아니라 다양한 분야에서 쓰여지는 원칙이라고 할 수 있다. 우리가 항상 염두에 두어야 할 것은 프론트 엔드 개발에 있어서 이러한 원칙을 지켜 꼭 잘못된 데이터가 유저에게 제공되는 일이 없도록 해야하는 것이다.
3. 상태 관리를 위한 툴
Context API
Redux
Mob X
Context API가 있기 전에는 상태 관리에 거의 대부분 Redux가 쓰였다. 근데 Redux는 해보면 알겠지만 굉장히 어렵다.. 구조도 그렇고 정확히 이해하려면 정말 오랜 시간이 필요할 것이다. 이러한 Redux의 불편함 때문에 Context API가 나왔는데 Redux보다는 훨씬 쓰기 편하다.
Hook => state Hook 과 Effect Hook 이 존재
Hook은 함수형 컴포넌트에서 React state와 생명 주기 메소드들을 연동할 수 있게 해주는 함수이다. React는 useState와 같은 내장 Hook을 제공하고 있으며 이를 사용하면 웹이나 앱개발에 있어서 클래스형 컴포넌트가 필요없게 해준다.
State Hook
1. State Hook
원래 state는 클래스형 컴포넌트에서 this.setState 함수를 통해 관리되던 컴포넌트에 영향을 미치는 동적인 데이터였다. 그러나 이제는 클래스형 컴포넌트 뿐만 아니라, 함수형 컴포넌트 컴포넌트에서도 이번에 배울 Hook을 통해 state를 관리할 수 있게 되었다.
함수형 컴포넌트 안에서 state를 관리해줄 Hook은 바로 useState이다. useState는 현재의 상태값과 이 상태를 바꿔줄 함수를 쌍으로 제공한다. 우리는 this.setState 함수처럼 useState가 제공하는 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다.
