레코일 / 리덕스 그리고 csr ssr

평소 next js 와 Redux Toolkit 을 사용해왔는데 코드량이 너무 많고 복잡하여 새로운 상태관리 툴인 recoil 을 사용해보기로 하고 비교를 해보았다

---

Recoil

장점: 가장 강점은 리액트의 useState와 비슷하게 동작하고 코드가 간단하고 바로바로 읽고 이해하기 쉽고 코드의 양도 많이 준다 ( 리팩토링 장점 )

단점: 단점을 찾아보니 Redux처럼 Devtool이 아직 없다. 그리고 ssr에서 불편한 요소들이 많다고들 한다

Redux

장점: Redux Devtools 제공 이로 인해 전역으로 관리해야 하는 상태값이 많아질 경우에 한곳에 모아서 관리하기 때문에 디버깅을 상대적으로 한곳에서 처리할수있다.

단점: 그렇지만 작은 상태 하나를 변경하려고 해도, actions, reducer, type 등 코드를 많이 작성해야 하는 번거로움이 있다. < 이게 가장 크게 와닿은 단점

---

내가 생각한 장단점 말고 블로그들을 찾아보니..

대규모 상태를 관리해야 하는 프로젝트에는 redux를 사용하는 것이 좀 더 적합할 것, 대규모 상태를 디버깅하기 위한 안정적인 devtool도 가지고 있기 때문에 안정성 면에서는 redux가 더 낫다고 한다

하지만 상대적으로 크지않은 대규모 데이터를 다루는 것도 아니고 기한을 짧게 짧게 개발속도를 늘리고 싶다면 상대적으로 적은 코드를 작성하는 recoil이 redux에 비해 유리하다고 한다

---

Recoil은 왜 SSR에서 불편할까 ? SSR이란 뭘까?

SSR (Server Side Rendering) 의 경우에는 먼저 인덱스 페이지에 표시되어야 할 html 파일을 먼저 브라우저가 다운 받는다. 그리고 나서 javascript 파일도 다운 받는다. javascript 파일을 다운 받는 동안에 이미 html 파일의 렌더링을 시작하기 때문에 웹페이지 표시가 빠르다.
렌더링이 빠른 장점이 있지만 페이지를 이동할 때마다 화면 깜박임(화면이 로드될 때마다 화면이 백지로 변하고 다시 화면이 출력되는 과정)이 있다.

CSR (Client Side Rendering) 의 경우에는 맨 처음 url 요청에 웹문서가 가지고 있는 모든 정보, 링크페이지까지도 한번에 다 받아온다. 그래서 초기 화면 로드가 느리다. 그러나 일단 로드가 되고 나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아진다.

---

Recoil은 왜 SSR에서 불편할까 ?

next js 에서
getServerSideProps에서 Recoil state를 불러올 수 없다.

getServerSideProps란 ?

getServerSideProps 는 요청할때마다 html이 생성되기 때문에 데이터가 계속 업데이트 하여
요청할때마다 데이터를 계속 불러오는 것
그래서 데이터를 새로 받아오면 그 데이터로 페이지가 새로 랜더링 된다
page를 사용자가 요청하면 getServerSideProps 를 먼저 실행후 프론트가 서버에 직접요청 후 데이터를 받아와서 page 컴포넌트에 date를 props로 전달하여 렌더링 할 수 있음
getServerSideProps 는 계속 데이터가 바뀌어야하는 페이지의 경우 사용하고
빌드 시가 아닌 매 request마다 실행된다

내가 이해하기론 데이터가 계속 바뀌어야하는 실시간 검색순위 ? 이런거를 얘기하는거같다

즉 Recoil은 getServerSideProps가 아직 지원을 하지않아서 getServerSideProps환경에서는 Rcoil state를 사용할수없다고 한다.

---

자 이제 장단점 정리가 끝났으니 예제 코드를 보자

redux tooket

export const initialState: UserInitialStateType = {
  device: '',
  }
export const UserSlice = createSlice({
  name: 'pageName'
  initialState,
  reducers: {
    setpageName: (state, action: PayloadAction<string>) => {
      state.pageName = action.payload;
    },
  },
  

상태관리 코드

 const dispatch = useDispatch();
 조건 {
 dispatch(PostSlice.actions.setpageName(data));
 }

---

Recoil

export const pageNameState = atom({
  key: 'pageNameState',
  default: '',
});

상태관리 코드

const [pageName, setPageName] = useRecoilState(pageNameState);
조건 {
setPageName(data);
}

---

useRecoilState

UseState 와 같은 동작

useRecoilState

상태의 값만 필요한 경우

맙소사 이만큼의 코드 차이가 있다. 그냥 recoil은 UseState 처럼 사용하면 돼서 한페이지안에 변수 명과 주석만 잘 달아주면 얼마든지 코드 수정이 쉬울거같다.
하지만 예제만 몇개 건드려보고 큰 프로젝트를 사용한적은 없어서 실제로 사용 해보아야 좀더 체감이 같거같다