전역 상태 관리

전역 상태 관리

상태란?

React에서 말하는 상태란 Plain JavaScritp Object hold information influences the output of render . 즉, 렌더링 결과에 영향을 미치는 정보를 가진 자바스크립트 객체를 의미한다.

더 쉽고 직관적으로 나타내자면 시간에 따라서 동적으로 변할 수 있는 정보라고 할 수 있다.

전역이란?

어떠한 곳에서도 접근할 수 있는 영역을 의미한다. 단순히 하나의 페이지를 의미하는 것이 아닌 컴포넌트의 외부와 애플리케이션 전체에서 접근이 가능하다는 것이다.

그렇다면 전역 상태란 어떠한 곳에서도 접근할 수 있으면서 렌더링 결과에 영향을 미치는 것을 의미한다.

프론트엔드를 개발하다보면 서로 다른 맥락의 상태를 사용하게 된다. 이는 어디에서 정보를 접근 또는 변경할 수 있는 권한을 가지고 있는 지에 따라 달라진다. 서버에서 변경되며 서버로부터 받아오는 정보와, 클라이언트단에서 생성하고 변경할 수 있는 정보가 있다.

전자는 최신 글 목록, 프로필 정도 등이 있을 것이고, 후자는 다크모드/라이트모드 또는 검색바 등이 있을 것이다.

후자의 경우는 관리하기 쉬우니 전자의 경우를 다루어 보자.

function App() {
    const [todos, setTodos] = useState([])

    useEffect(()=> {
        const fetchTodos = async() => {
            const res = await fetch('/api/v/todos')
            const data = await res.json()
            setTodos(data)
        }
    }, [])

    return(
        <div>
            {todos.map((todo) => {
                <h1 key={todo.id}>{todo.title}</h1>
            }
        </div>
    )
}

서버 API로부터 데이터를 받아 렌더링하는 react 코드를 작성할 때 우리는 대부분 위와 같은 방식을 사용한다.

1. 데이터를 비동기적으로 받아온다
2. 데이터를 컴포넌트의 상태로 정의한다
3. 상태를 불러와서 렌더링한다

하지만 매번 이와 같은 방식으로 데이터를 호출해서 사용하는 것은 너무 불편해보인다. 따라서 우리는 지금까지 redux를 사용해 한 곳에서 데이터를 요청하고 그것을 전역에서 접근할 수 있는 store에 저장해서 사용했다. 하지만 이것은 여러가지 문제점을 발생시킨다.

필요한 값이 store에 존재한다는 확신

function TransactionListA() {
  const transactions = useSelector(state => state.transaction)

  return <ul>{/* render transaction */}</ul>
}

우리는 이런 식으로 컴포넌트를 재사용할 수 있을 것이라는 기대를 한다. 하지만 store.transaction이 비어있다면 어떻게 할 것인가? 이전에 단 한번도 dispatch를 통해 fetchTransactions 액션을 발생시키지 않았다면 어떨까?

이 컴포넌트가 마운트 되기 이전에 dispatch가 되어야 state에 접근할 수 있도록 하는 것이 필요하지만, redux는 이를 강요하지 않는다.

우리가 필요로 할 때 데이터를 불러와야 하지만 이 방식으로는 필요로 할 때 데이터가 불러와지지 않는 것이다.

현재 접근하는 데이터가 가장 최신의 것이라는 확신

만약 앱을 처음 실행해서 홈 화면에 접속했을 때 dispatch하고 이후 다른 화면에서 다시 그 정보를 불러올 때, 지금 store에서 불러온 정보가 fresh하다는 것을 보장하지 못한다. 클라이언트 단에서 보고 있는 정보와 서버에 있는 정보가 일치하지 않게 되는 문제가 발생하는 것이다. 이러한 정보를 ‘stale response’라고 한다.

해결방법

stale-while-revalidate

• 캐싱 전략
• stale-while-revalidate가 유지되는 동안은 캐시된 값이 이미 stale이지만 그냥 반환하고, 백그라운드에서 캐시를 fresh하게 만들기 위한 재검증 요청이 이루어진다.
• stale-while-revalidate가 끝나면 서버에 새로운 요청을 보낸다.
• 이 전략을 사용한 라이브러리가 SWR, React Query.

근본적인 해결 방법

• 공통된 상태를 공유하는 컴포넌트들을 Provider로 묶어서 전역이 아닌 해당 컴포넌트들에서만 사용할 수 있도록 제한