React 불변성 라이브러리에 대한 생각

React 이 불변성

익숙해지면 라이브러리를 쓰던 JS 메서드를 쓰건 알아서 해라

React 를 쓰다 보면 불변성에 대한 얘기를 많이 듣는다

여기서 불변성이란 무엇이냐 상태 관리를 하고 있는 데이터에 직접적인 변화를 주지 않는것을 말한다

왜 불변성을 지켜야 하느냐w

1. side-effect 특정 객체가 변경되면 참조하고 있던 객체에서도 변경이 일어나며 연쇄적인 side-effect 를 일으키며 프로그램의 복잡도가 높아질 수 있다

2. 최적화 방식 React 는 상태가 변경될 시 새로운 객체와 기존의 객체와 비교하고 변화가 있을 시 컴포넌트를 업데이트 하라는 명령을 내리게 되고 그에 따라 가상 DOM 과 실제 DOM 을 비교하여 화면을 다시 그린다

어떻게 불변성을 지키느냐 변화시키고 싶은 객체를 이용하여 새로운 객체를 만드는 방식으로 지킨다

1. JS 메서드 사용

   전개 연산자, map, filter 등의 배열 메서드 등 여러 JS 메서드를 이용하여 데이터를 다룬다

2. 라이브러리 사용

   immer.js, immutable.js

오늘 얘기하고 싶은건 바로 이 불변성을 지키는 방식에 대해서다 서로 비교를 해보자

JS 메서드의 장점

1. 조금이라도 무거운 라이브러리보다 훨씬 빠르다는 것이다 개발자의 역량에 따라 데이터 구조에 최적화된 방식으로 상태 변화 로직을 짤 수 있다

2. 라이브러리 의존도가 낮아진다 JS 를 메서드를 사용하다보니 라이브러리 의존도가 낮아진다

JS 메서드의 단점

1. 손이 많이 간다. nested 데이터 구조를 다루다보면 코드는 길어지고 보기 싫어진다

라이브러리의 장점

1. 코드가 짧아진다. 볼 수 있는 개발자들의 눈에는 굉장히 코드가 짧아진다

2. nested 데이터 구조를 쉽게 다룰 수 있다 라이브러리가 알아서 파싱해주기 때문에 방법을 잘 알면 수월하게 상태변화를 할 수 있다

라이브러리의 단점

1. 속도 라이브러리가 처리하다 보니 해당 코드에 최적화된 로직을 사용하기 힘들다

2. 라이브러리 의존도 상태관리를 라이브러리에 의존하다보니 숙련도가 떨어지는 개발자들에겐 오히려 해가 될 수 있다

상태 관리는 React 에서 매우 중요해서 많은 사람들이 이런 장, 단점을 들며 라이브러리를 쓰지 말라고 권한다 상태 관리 활용 능력을 기르기 위한 조언이라고 생각한다.

하지만 nested 상태를 관리하다보면 처음에는 쉽지 않겠지만 어느정도 능숙해지고 나면 결국은 노가다이다 특별한 자료 구조가 아닌 이상 결국 map, filter, 전개 연산자 이 3가지를 반복적으로 노가다를 하게 된다

그리고 라이브러리 사용도 적절한 타이밍에 쓰면 생산성이 증대되며 다른 일에 집중할 수 있다 nested 자료구조들을 라이브러리 사용으로 손쉽게 해결하면 다른 비즈니스 로직들에 집중할 수 있는 시간들이 늘어난다.

그러면 어떤 시기에 상태관리 라이브러리를 사용할만 할까? 하는 고민을 하다가 참고해서 내린 결론이다

1. 상태관리의 숙련도가 있을 경우 근-본이 중요하다고 생각한다 다룰 줄 알아야 다른 걸 붙인다고 본다

2. nested 자료구조를 다룰 때 복잡하지 않는 자료구조는 라이브러리를 쓰면 무겁기만 하고 필요없다고 생각한다

3. 팀 내부에서 라이브러리 사용에 대한 합의가 됐고 지식과 숙련도가 있을 경우 결국 쓰는 사람들이 합의를 해야 한다는 것이다. 혼자 쓰고 싶어도 다른 사람도 동의해야 할 일.

   그리고 알아야 한다는 것이다. 모르고 대충 쓰다가 이슈가 나오면 해결하기 낭패이다.