1. 자바스크립트: 불변성을 유지하는 방법

1. 불변성이란?

• 변하지 않는 것. 한번 생성되고 나면 변경할 수 없음.

2. 자바스크립트의 원시타입

• Boolean, String, Number, Null, undefined, Symbol !== Object
• 메모리 영역 안에서 변경이 불가능하며, 변수에 할당할 때 완전히 새로운 값이 만들어져 재할당됨

3. 불변성을 지켜야하는 이유

• 전역변수를 지양하는 이유와 같음
• 값의 변화를 추적하기 쉬움
• 원본데이터가 변경될 경우, 해당 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있기 때문

4. 불변성을 지키는 방법

1. Object메서드 사용

1. Object.assign()을 사용하여 데이터를 복사해서 사용
2. Object.freeze()을 사용하여 원시값을 얼림 (strict mode에서 동작), 중첩객체 적용 안됨
   (object값들은 변경 가능, 물론 object도 얼리는 방법은 있음)
3. Object.seal()은 freeze와 유사한 기능을 하지만 객체에 새 속성을 추가하거나 삭제할 수 없음
4. Object.preventExtensions()은 seal()과 동일하고 속성 삭제가 가능함

2. 스프레드 문법 사용

• 스프레드 문법을 사용해 객체를 복사하면 객체 불변성을 유지할 수 있음
• but, 1레벨 깊이에서만 유효하기 때문에 객체 내부의 불변성까지는 유지하기 어려움

var coke = {
  name: 'coca',
  price: 2980,
}
var new_coke = {...coke};
coke.name = 'pepsi';
console.log(coke.name, new_coke.name); // 'pepsi' 'coca'

4. immer/Immutable라이브러리 사용

5. map, filter, slice, reduce와 같은 새로운 배열을 반환하는 메서드 사용

0. 질문

Q. 그럼 const도 불변인가?
A. const도 재선언 및 재할당이 불가능하긴 하지만, 값에 대한 참조가 한번 변수에 할당되면 변할 수 없음을 의미하는 것이지 const변수가 참조하고 있는 값이 불변한다는 의미는 아님

2. 리액트: Props Drilling

1. Props Drilling이란?

• props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정
  (컴포넌트가 드릴처럼 밑으로 뚫고 내려간다!)

2. Props Drilling의 장점

1. 컴포넌트 간에 데이터를 가장 쉽고 빠르게 전달할 수 있음
2. (작은 application의 경우) 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤 데이터가 어디서 사용되는지 쉽게 파악할 수 있으며, 수정도 용이함

3. Props Drilling의 문제점

• (규모가 큰 application의 경우) 코드가 복잡해짐
• 필요보다 많은 props를 전달하다가 컴포넌트 분리 과정에서 필요하지 않은 props가 계속 남거나 전달되는 문제가 발생
• props전달을 누락했는데 default props가 사용되어 props의 미전달을 인지하기 어려운 문제
• props의 이름이 전달 중에 변경되어 데이터를 추적하기 어려워지는 문제

4. 방지법

1. 전역 상태관리 라이브러리 사용

• redux, MobX, recoil

2. 불필요한 컴포넌트 쪼개기 하지 말기

3. defaultProps를 필수 컴포넌트에 사용하지 말기

const App = ({ name = 'Chanmin', age = 25})

4. 관련성이 높은 곳에 state를 위치

• 최상위 컴포넌트가 아닌 해당 state를 필요로 하는 컴포넌트들의 최소 공통 부모 컴포넌트에서 관리할 것

5. children사용

• children을 사용하면 하나의 컴포넌트에서 값을 관리하고 그 값을 하위요소로 전달할 때 코드 추적이 어려워지지 않게 됨

0. 질문

1. 상태관리 라이브러리 비교

1. Redux

• action, reducer, selector, store를 세팅하는 코드가 필요
  (장점: 유지보수, 단점: 보일러플레이트(필수) 코드가 큼)
• 중앙집중방식
• 비동기 데이터 처리를 하려면 saga와 같은 별도 라이브러리를 추가사용해야 함

2. recoil

• Atom, Selector로 이루어짐, 해당 컴포넌트만 선택적으로 리렌더링 됨
• Selector는 비동기처리, 데이터 캐싱기능 제공
• 비동기 기반으로 작성되어 동시성 모드 지원
• delete를 사용할 때 에러가 났음...

2. Context API는 상태관리 라이브러리인가?

• ContextAPI는 전역적으로 상태를 공유해주는 기능한 하고 실질적인 상태관리는 useState와 useReducer가 하게 됨
• Context API에서 상태값을 변경하면 Provider로 감싼 모든 자식 컴포넌트들이 리렌더링 됨
• provider내부에서 상태 변경이 거의 일어나지 않는다면 해당 상태를 provider하위의 다른 컴포넌트에 전달하는 용도로 쓰는데 적합함 (locale, theme)
• 정적인 값에 가까운 값을 props drilling 대신할 때 적절함