시작에 앞서,

React project를 하다보면 상당히 많이 듣는 용어로, "상태 관리"라는 말을 많이 들어봤다. single component에선 useState을 통해 상태를 관리하면 되지만, 규모가 있는 컴포넌트의 경우, 컴포넌트에서 컴포넌트로 props를 전달해서 id와 같은 파라미터를 전달하게 되고, 그러다보면 컴포넌트간에 큰 의존성이 생겨서 코드를 수정하거나 디자인을 변경할 경우, 복잡한 작업이 동반된다.

이를 해결하기 위해 "전역 상태 관리" 즉, 큰 컴포넌트에서 중간 컴포넌트로, 중간 컴포넌트에서 작은 컴포넌트로 props를 전달하는게 아니라 전방위의 데이터를 저장하는 데이터 저장소에서 id값을 기반으로 컴포넌트를 만들어서 효율성을 높이는 작업을 하기 위해 상태를 전역 상태로 관리하는걸 전역 상태 관리라고 한다.

전역 상태관리 Library

전역 상태관리 라이브러리로는 대표적으로 Redux와 Recoil이 있다. 각각의 장단점이 있지만, 이미 내 프로젝트에선 apollo client를 이미 사용하고 있기 때문에 apollo-client가 제공하는 reactive variables라는 메커니즘을 이용해서 전역상태 관리를 해볼 생각이다.

Reactive Variables의 가장 큰 장점은 사용하기가 쉽다는 것인데,

import { makeVar } from '@apollo/client';

export const signUpVar = makeVar({
  korName: "",
  email: "",
  password: "",
  passwordConfirm: "",
  birthDate: "",
  gender: "",
  phone: "",
  step: 1,
  agreement: false,
  authModal: false,
  authNumber: "",
  isUser: false,
});

이렇게 apollo.tsx파일 내에 선언하는 것으로 다른 모든 컴포넌트에서 사용할 수 있다는게 장점이다. 단점으로는 다른 context파일과, 캐시, 서버 설정등이 다 apollo.tsx파일에서 진행되서 전역변수가 많아질수록 apollo.tsx의 파일 크기가 커지고, 가독성이 안좋아져서 유지보수가 힘들다는게 단점이다.

따라서 프로젝트가 커진다면 Recoil이나 redux, react-query 세개 중 하나를 선택해서 상태관리를 변경해보는 포스팅을 다시한번 작성할 계획이다.

프로잭트에 적용해보자

기존에 폴더 트리를 보면,

ㄴ signUp/
  ㄴ signUp.tsx (use State 선언)
  ㄴ phoneAuth.tsx (props로 전달)
  ㄴ emailAuth.tsx (props로 전달)

즉 signUp.tsx에서 하위 컴포넌트인 phone과 email 컴포넌트로 prop을 전달하고, 그 이후에 하위 컴포넌트에서 유저가 input을 적으면 다시 상위 컴포넌트로 상태를 변경하는 로직을 구현했는데, 이게 모바일과 웹버전을 다른 컴포넌트로 구현하면 강한 의존성이 생긴다. 만약에, 기획자가 UI를 위해 phone auth에 있는 정보중 이름과 생년월일을 각각의 컴포넌트로 변경하고 싶다고 요청이 들어오면, 이 일련의 과정을 다시 작업해야 하는 결과가 생긴다.

이 폴더 트리에서 상태관리를 signUp.tsx에서 하는게 아니라 apollo.tsx에서 관리를 하고, 변경사항이 생길때마다 전역에서 상태를 변경하는 트리구조는 이렇게 되어있다.

사용자가 인풋에 따라 상태를 변경할땐

/phoneAuth.tsx

import { signUpVar } from "../../../apollo";
import { useReactiveVar } from "@apollo/client";

function PhoneAuth(){
	const signUpInput = useReactiveVar(signUpVar);
  return
  ...
  <div>
    <input onchange={(e)=>signUpVar({...signUpInput, korName: e.target.value}}></>
    </>
} 
...

이런식으로 useState을 쓸때와 비슷하게 상태를 변경해주면 된다.

마무리

이렇게 지역 상태를 전역 상태로 변경했다. 현재는 회원가입과 필터링에 전역 상태 관리를 사용하고 있는데, 프로젝트가 커짐에 따라 몇개가 추가될 예정이다.
최초에 리액트를 배울땐

const [counter, setCounter] =useState(0) --> 한개의 상태관리
const [inputs, setInputs] = useState({name: "", lastName: ""}) --> 오브젝트로 관리 

이제는 전역 상태 관리를 사용하는거 처럼, 개발이라는게 프로젝트가 커짐에 따라 각각의 기능이나 라이브러리를 추가하는 과정인거 같다. 사이드 프로젝트의 장점은 직접 부딪치면서 각 스테이지를 경험할 수 있고, 작은 단위의 컴포넌트에서 커짐에 따라 왜 특정 라이브러리나 함수, 프레임워크 등을 써야 하는지를 직접 경험해 볼수 있어서 참 좋은 경험이라고 생각한다.