immer

state의 데이터 구조가 복잡해지면 불변성을 지키기 위해 변하지 않는 값에 대해 spread 문법을 사용해서 얕은 복사를 하는 것이 지저분해질 수 있는데 immer를 사용하면 이 문제를 해결할 수 있다.

1

$ npm i immer

Redux에서만 아니라 React의 useState, setState에서도 immer를 사용할 수 있으며,hooks를 위한 useImmer도 있다.(useState 대체 가능)

우선 Redux의 reducer 함수에서의 immer의 사용에 대해서 알아보자.

reducer함수는 이전 상태를 action을 통해 다음 상태로 만들어내는 역할을 한다.
이때 새로운 상태는 반드시 불변성을 지켜서 구현을 해줘야 하는데, 구조가 복잡한 객체의 불변성을 지켜서 상태값을 업데이트하는 것이 복잡한 경우에는 immer를 사용한다.

immer의 기본 사용 형태
기존 reducer함수의 switch-case 문을 produce의 내부에 작성해준다.

1
2
3

const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {});
};

immer를 사용하게 되면, 기존에 state로 작성했던 부분이 draft로 대체가 된다. draft는 별도의 불변성과 상관없이 작성을 해줘도 immer가 알아서 새로운 state를 불변성 지켜서 만들어준다. (state 인자는 건들이지 말고 draft만 조작하도록 한다 - return produce()부분이 불변성을 지킨 새로운 state 값을 반환해준다)

2021/05/17 - redux-thunk 내용추가

Next Redux Wrapper

일반적으로 React에 Redux를 붙일 때에는 하나의 Redux store만 존재하기 때문에 어렵지 않다.
하지만 Next.js에서 Redux를 사용하게 되면 여러 개의 Redux store가 생성된다.
그 이유는 Next.js에서는 User가 Request를 보낼때마다 Redux store를 새로 생성하기 때문이다. 그리고 Next.js에서 제공하는 getInitialProps와 getServerSideProps에서도 Redux store에 접근이 가능하도록 해야되기 때문에 NextJS에서 Redux를 붙일때 꽤나 복잡하다. 하지만 이를 간편하게 해주는 라이브러리가 있는데 바로 Next Redux Wrapper이다.

next redux wrapper 설치

/store/configureStore.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { createWrapper } from 'next-redux-wrapper';
import { createStore } from 'redux';
import reducer from '../reducers';

const configureStore = () => {
  const store = createStore(reducer);
  return store;
};

const wrapper = createWrapper(configureStore, {
  debug: process.env.NODE_ENV === 'development'
});

export default wrapper;

참고 : https://github.com/vercel/next.js/tree/master/examples/with-styled-components

Next.js에서 styled-components 사용하기

Next.js에서 styled-components를 사용하려면 몇 가지 설정이 필요하다.

(1) babel-plugin-styled-components 설치하기

이 패키지를 설치하는 이유는 Next에서 최초로 SSR이 된 이후에 내부 라우팅을 통해 페이지가 이동하면서 CSR을 하게 되는데, className의 해시값이 서버에서 생성되는 값과 브라우저에서 생성되는 값이 불일치하게 되면서 에러가 발생하기 때문에 설치해줘야 한다.

1

npm i -D babel-plugin-styled-components

(2) .babelrc 파일 생성하기

1
2
3
4

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

(3) pages 폴더 아래에 _document.js 파일 생성하기

참고: https://nextjs.org/docs/advanced-features/custom-document

NextJS 프로젝트 기본 설정

next v9

1

$ npm i next@9

package.json

1
2
3
4

"script": {
  "dev": "next",
  "build": "next build"
}

NextJS의 js파일에서는 import React from 'react';구문이 필요없다.

그 이유는 NextJS 프레임워크가 pages 폴더내의 js파일들을 code splitting된 개별적인 page component로 만들어주기 때문이다.

pages와 layout

React에서는 react-router로 routing 경로를 설정해줘야 했는데, NextJS는 front server를 가지고 있기 때문에 pages폴더내의 파일의 이름을 url로 자동 mapping 시켜준다.

pages/profile.js => /profile
pages/signup.js => /signup
pages/about/lee.js => /about/signup

SSR(Server-Side-Rendering)과 CSR(Client-Side-Rendering)의 차이

렌더링이란 요청받은 내용을 브라우저 화면에 표시하는 작업을 말한다. 그렇다면 SSR(Server Side Rendering)과 CSR(Client Side Rendering)은 어떤 차이가 있을까?
간단하게 동작방식을 노트에 그려보았다.

왜 굳이 이 라이브러리 이 프레임워크를 사용했나요?

사이드 프로젝트를 하기로 결심했다면 각자 어떤 라이브러리를 사용할지 또는 어떤 프레임워크를 사용할지 결정했을 것이다. 그런데 만약에 그 프로젝트가 완성이 되었다고 가정하고, 누군가 그 프로젝트에 대해서 구체적으로 왜 그 라이브러리(혹은 프레임워크)를 사용했나요? 라고 묻는다면 뭐라고 대답할지 생각해본 적이 있는가?
나 역시도 이전에는 그냥 요즘 많이 언급되고 실무에서 많이 쓰인다는 이유로 학습을 한 경우가 많았다. 물론 뭔가가 이전에 이미 존재했던 것들에 비해 나은 점이 있으니 각광을 받고 있는 것이다.

하지만 지금 이 시점 이후에 하려는 사이드 프로젝트는 사용하려는 기술에 대해 제대로 이해하고 누군가가 물어봐도 확실하게 대답할 수 있을 정도로 알고 있다는 전제하에 시작하려고 한다.