상태의 두가지 구분
상태를 구분하는 데에는 절대적인 기준이나 법칙이 있는 건 아니다.
우리가 처음 JavaScript를 배울 때처럼 로컬 상태, 전역 상태로 나눠서 접근한다면, 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태
이며, 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태를 말한다.
로컬 상태
로컬 상태를 구분하는 것은 쉽다. 보통 컴포넌트 내에서만 영향을 끼치는 상태는 로컬 상태이다.
<Cartltem> 컴포넌트의 경우ㅡ '선택한 수량'이 된다.
원래 가격에 상태를 곱해 컴포넌트 내에 표시되는 주문 금액을 업데이트하면 된다.
전역 상태
전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태이다.
장바구에 담긴 물품의 경우, 상품 선택 여부에 따라 총 주문 금액을 업데이트해야 한다.
장바구니에 담긴 물품은 그 갯수 등을 다른 컴포넌트에 전달해 주어야 한다.
JavaScript를 처음 배우면 전역 변수를 남용하는 것은 좋지 않다고 배웠다.
하지만, 경우에 따라 전역 상태가 필요하다.
서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역 상태일 필요는 없다.(출처(source)가 달라도 된다.)
그러나, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만일 사본이 있을 경우 두 데이터는 서로 동기화(sync)하는 과정이 필요한데, 이는 문제를 어렵게 만든다.
한 곳에서만 상태를 저장하고 접근해야 한다. 여기서 '하나의 출처'는 다른 말로 이야기하면 '전역 공간'이라고 볼 수 있다.
전역 상태에서의 데이터 무결성
데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 와야 한다.
Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔드 뿐만 아니라 다양한 곳에서 언급되는 원칙이다.
데이터가 존재하고, 그 데이터를 보여줘야 하는 프론트엔드에서는 철저하게 우리가 의도한 대로 예외 상황 없이 데이터를 잘 보여주어야 한다. 보여주고자 하는 데이터가 있다면 그 데이터가 어떤 경우에도 UI 상에 잘못 전달되는 일이 없게 만들어야 한다.
전역 상태 관리 Case study
예를 들어 네이버를 비롯한 여러 사이트는 다크 모드 기능이 있다. 이 경우 모든 페이지, 모든 컴포넌트에 다크 모드 혹은 라이트 모드가 적용이 되어야 하기 때문에 이러한 테마 설정을 전역으로 관리 할 수 있다.
props drilling 문제를 해결 할 수 있다.
예를 들어, <A>라는 컴포넌트에 상태가 있고, <I>라는 컴포넌트가 해당 상태를 사용한다고 하면, 그 중간에 존재하는 <C>.<G>등은 굳이 name 이라는 상태가 필요하지 않음에도, 컴포넌트에 props를 만들어 자식 컴포넌트에 넘겨주어야 한다.
이러한 문제들을 props drilling(프로퍼티 내려꽂기) 문제라고 부른다.
전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결 할 수 있다.
상태 관리 툴이 반드시 필요할까? 꼭 그런것만은 아니다 툴 없이도 규모 있는 애플리케이션을 만들 수 있다.
Props Drilling이란?
Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다.
Props Drilling의 문제점
Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않는다.
하지만 규모가 커지고 구조가 복잡해지면 Props의 전달 과정이 늘어나면 아래와 같은 문제가 발생한다.
- 코드의 가독성이 매우 나빠진다.
- 코드의 유지보수 또한 힘들어지게 된다.
- state 변경시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다.(웹성능에 악영향을 준다)
해결 방법
과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있다.
상태관리 라이브러리를 사용하게 되면 전역으로 관리하느 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이다.
