install 하면 node-modules 에 모듈이 설치되는 건 동일하다.

# 참조 : https://velopert.com/1015

npm install --save-dev immutability-helper

import update from 'immutability-helper';

//원소추가

this.setState({

  list:update(this.state.list, {  $push: [newObj1, newObj2] } // 두개 Object 추가

});

// 원소 제거

this.setState({

  list:update(this.state.list, {  $splice: [[index, 1]] }

});

// 배열 원소 수정

this.setState({

  list:update(this.state.list, {  [index]: {field:{$set:"value"}, {{$set: "value2"}} }가

});

// 객체 원소 수정 = 배열원소수정에서 [index] 대신에 객체명:$set 사용

참조 : https://velog.io/@noah071610/CRA%EC%97%90%EC%84%9C-babel%EC%9D%B4%EB%82%98-webpack-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

노아입니다.

CRA는 Create react App 의 약자이다

즉 React App 의 초기설정을 쉽게 해주자는 취지로 만든건데

친절하게 기본적인 설정과 폴더 구분... 그리고 바벨과 웹팩까지 설정해준다니... 이건 써야돼!!

하지만 단점도 있으니 커스터마이징이 굉장히 어렵다는것이다

본인은 이모션이라는 css 라이브러리를 사용하고있었는데, 여기서 애를 먹었다.

이모션은 css props를 추가한 자체 jsx를 사용하고있어서 문서 상단에 항상

/** @jsxImportSource @emotion/react */ <- 이놈
import { css } from "@emotion/react";

이런식으로 구문을 추가해야지 비로소 Emotion이 작동했다

하지만 매번 새로운 컴포넌트에 이런식으로 구문을 추가하는건 뭔가 꺼림직하다

그래서 중복제거를 목표로 바벨 프리셋을 설정하려고 했지만 CRA는 바벨설정이 불가능하게 셋팅되어있다.

eject를 사용하게 되면 설정이 가능한데 그러면 CRA의 본질 자체를 잃어버린다.

마치 컴퓨터를 소비자를 위해 깔끔하게 조립해서 배송해줬더니 그걸 다 뿌수고 새로 조립하는 아이러니한 상황이 연출되는거다. (그럴꺼면 다나와에서 알아서 사서 조립하지 왜 조립해달라고 했어?)

그렇기 때문에 eject는 지양하고 craco를 사용해서 babel preset을 오버라이딩 해줬다

=> package.json

npm i @craco/craco
npm i -D @emotion/babel-preset-css-prop

=> craco.config.js

const emotionPresetOptions = {};

const emotionBabelPreset = require("@emotion/babel-preset-css-prop").default(
  undefined,
  emotionPresetOptions
);

module.exports = {
  babel: {
    plugins: [...emotionBabelPreset.plugins],
  },
};

루트폴더에 craco.config.js 를 추가하고 안에 preset을 추가해 준다.

그리고

=> package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

스크립트 명령어를 craco 로 바꿔 주도록한다.

그러면 eject 없이 CRA에 babel 설정을 override 가능하게 된다.

개인적으로 CRA는 양날의검이다.
프로젝트의 성향에 따라 사용할지 안할지를 결정해서 쓸데없는 시간낭비를 미연에 방지하도록 하자.