2022.10.02 꼬꼬코 immer 라이브러리 심화

1. immer 라이브러리를 사용하면 언제나 효율적인 코드를 작성할 수 있다? 

답: 아닐 수도 있다! 예를 들어, onRemove 이벤트를 생각해 보자. 굳이 굳이 immer 를 사용해야할 이유가 없다. 그냥 배열의 filter 함수를 이용하면, 불변성을 유지하면서도 간결한 코드로 기능을 구현할 수 있다. filter 함수는 기존 배열을 수정하는 것이 아니라, 새로운 배열을 만들어 내기 때문에 가능하다. 

2. useState 의 함수형 업데이트와 immer 를 결합해서 사용할 수는 없을까?

답: 넘나 가능! useState 의 인자로 immer의 produce 함수를 쓰고 produce 의 첫 번째 파라미터로 함수 형태를 주면 됨!  

//예시
const onChange = useCallback(e => {
	const {name, value} = e.target;
    setForm(
    	produce(draft => {
        	draft[name] = value; 
        })
    );
}, []);

3. 꼬꼬코! 그럼 immer 대신 깊은 복사를 사용하면 안돼? 왜? 

immer 라이브러리를 사용하게 된 이유는,

1. 불변성을 지키면서 값을 업데이트 해야 한다.

2. 내부의 객체나 배열을 복사할 때는 '얕은 복사' 가 일어난다.

3. 이에 객체 내부 객체나 배열 내부의 배열은 추가적인 복사를 해주어야 한다. 

4. 이때 깊이가 깊은 객체나 배열의 경우 이 값을 계속 복사하는 것이 귀찮다. 

5. immer 라이브러리의 produce 함수를 통해 draft 라는 파라미터를 이용해서 한 번에 접근 가능! (불변성을 지키면서)

에서 였다. 

 

그렇다면 애초에 얕은 복사가 아닌, '깊은 복사' 를 사용하면 안되는 것일까? 깊은 복사라는 것은 무엇일까? 

1. 깊은 복사란, '실제 값'을 새로운 메모리 공간에 복사하는 것을 의미한다.

2. 메모리 공간을 효율적으로 쓰지 못한다. 

3. 따라서 깊이가 깊고 데이터가 많은 객체나 배열일 수록, 깊은 복사보다는 얕은 복사를 사용하는 것이 메모리 활용 측면에서 더 유리하다.

4. immer 라이브러리는 어떤 원리로 동작하는 거야? 

그렇다면 immer 라이브러리는 도대체 어떻게 동작하길래, 저 복잡한 코드를 단 한 줄의 코드로 간결하게 정리할 수 있었을까?? -> 내일 주제로 토스!