## 불변 객체 [불변 객체](https://en.wikipedia.org/wiki/Immutable_object)가 뭘까? 간단히 말해서 생성 후에 상태를 바꿀 수 없는 객체를 말한다. 그럼 상태도 바꿀 수 없는 객체를 왜 사용할까? 여러 장점이 있지만 그중 몇 개만 적어보면 상태를 바꿀 수 없기 때문에 동시에 여러 곳에서 사용하더라도 해당 객체를 사용하는 쪽에서는 안전하게 사용할 수 있다. 또 불변 객체에 대해 작업하는 코드는 불변 객체를 사용하는 곳에 영향을 미치는 것을 고려하지 않아도 되고 불변 객체를 복사할 때 객체 전체가 아닌 참조만 복사해 메모리도 아끼고 성능도 향상시킬 수 있는 장점이 있다. React에서도 이런 불변성(Immutability)을 이용해서 성능을 최적화하는 방식을 사용하고 있다. React의 불변성에 대해 조금 더 자세히 알아보자. ## React의 불변성 React의 문서를 읽다 보면 [불변성을 강조](https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element)하는 부분 또는 [State를 직접적으로 변경하지 말라](https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly)는 말을 본 적이 있을 것이다. 왜 그런 걸까? React는 기본적으로 부모로부터 내려받는 `Props`나 내부 상태인 `State`가 변경되었을 때 컴포넌트를 다시 렌더링 하는 리렌더링 과정이 일어난다. React는 이 `Props`와 `State`의 변경을 불변성을 이용해서 감지한다. 객체의 참조를 복사한다는 점을 이용해 단순히 참조만 비교하는 얕은 비교를 이용해서 변경이 일어났는지 확인한다. 자바스크립트에서 참조 타입의 데이터인 객체의 경우 메모리 힙 영역에 저장이 되어 내부 프로퍼티를 변경해도 같은 참조를 갖고 있다. 따라서 객체의 특정 프로퍼티만 변경하는 작업을 수행하면 React에서는 변경이 일어나지 않았다고 인식하여 리렌더링이 일어나지 않는다. 따라서 리렌더링을 일으키려면 React에 이전의 참조와 다른 참조로 변경되었음을 알려야 한다. 참조를 바꾸는 방법은 여러 가지가 있지만 이 글에서는 간단하게 2가지 방법만 알아보겠다. 먼저 첫 번째 방법은 [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) 메서드를 이용하는 방법이다. ``` js const obj = { a: 1, b: 2 }; const obj2 = Object.assign({}, obj); console.log(obj === obj2); // false ``` `Object.assign()` 은 첫 번째 객체 인자 이후의 모든 객체 인자를 합쳐주는 메서드이다. 첫 번째 인자인 빈 객체(`{}`)에 obj의 프로퍼티들을 담아 새로운 객체를 반환하기

이번 글에서는 카카오스타일에서 Jotai를 어떤 식으로 사용하고 있는지 여러가지 패턴에 대해 설명하려고 합니다. 상태 정의하고 사용하기 Jotai의 기본 사용법은 간단합니다. useState로 정의하던 상태가 있으면, atom 메소드로 정의하고 useAtom을 써서 사용하면 됩니다. import { atom, useAtom } from 'jotai'; import { FC } from 'react'; const count_atom = atom(0); const App: FC = () => { const [count, setCount] = useAtom(count_atom); return ( <div> <div>{count}</div> <button onClick={() => setCount(count + 1)}>Inc</button> </div> ); }; 위 예제에서는 useState와 다른게 없지만, 하위 컴포넌트에서 해당 상태에 접근해야 할 경우 차이가 발생합니다. import { atom } from 'jotai'; import { useAtomValue, useUpdateAtom } from 'jotai/utils'; import { FC } from 'react'; const count_atom = atom(0); const Counter: FC = () => { const count = useAtomValue(count_atom); return <div>{count}</div>; }; const IncButton: FC = () => { const setCount = useUpdateAtom(count_atom); return <button onClick={() => setCount((count) => count + 1)}>Inc</button>; }; const App: FC = () => { return ( <div> <Counter /> <IncButton /> </div> ); }; useAtomValue와 useUpdateAtom은 읽기나 쓰기 중 하나만 필요할 때 사용가능한 유틸리티 함수입니다. 쓰기 함수는 useState의 setState 처럼 이전 상태를 받아 이용할 수 있습니다. 파생 atom 원시 atom의 값에서 파생된 atom을 정의할 수도 있습니다. MobX나 Vue의 computed 속성과 비슷합니다. useMemo와 같이 의존한 atom의 값이 바뀐 경우에만 재계산을 합니다. const email_atom = atom(''); const password_atom = atom(''); const button_enabled_atom = atom((get) => { return get(email_atom).length > 0 && get(password_atom).length > 0; }); 같은 Provider가 제공한 atom의 값만 얻을 수 있습니다. 액션 atom 쓰기 전용 atom을 통해 비즈니스 로직을 정의할 수 있습니다. // 전화번호 인증 과정 중 전화번호 입력 필드 값이 바뀔 때 호출한

불변 객체가 뭘까? 간단히 말해서 생성 후에 상태를 바꿀 수 없는 객체를 말한다. 그럼 상태도 바꿀 수 없는 객체를 왜 사용할까? 여러 장점이 있지만 그중 몇 개만 적어보면 상태를 바꿀 수 없기 때문에 동시에 여러 곳에서 사용하더라도 해당 객체를 사용하는 쪽에서는 안전하게 사용할 수 있다. 또 불변 객체에 대해 작업하는 코드는 불변 객체를 사용하는 곳에 영향을 미치는 것을 고려하지 않아도 되고 불변 객체를 복사할 때 객체 전체가 아닌 참조만 복사해 메모리도 아끼고 성능도 향상시킬 수 있는 장점이 있다. React에서도 이런 불변성(Immutability)을 이용해서 성능을 최적화하는 방식을 사용하고 있다. React의 불변성에 대해 조금 더 자세히 알아보자. React의 불변성 React의 문서를 읽다 보면 불변성을 강조하는 부분 또는 State를 직접적으로 변경하지 말라는 말을 본 적이 있을 것이다. 왜 그런 걸까? React는 기본적으로 부모로부터 내려받는 Props나 내부 상태인 State가 변경되었을 때 컴포넌트를 다시 렌더링 하는 리렌더링 과정이 일어난다. React는 이 Props와 State의 변경을 불변성을 이용해서 감지한다. 객체의 참조를 복사한다는 점을 이용해 단순히 참조만 비교하는 얕은 비교를 이용해서 변경이 일어났는지 확인한다. 자바스크립트에서 참조 타입의 데이터인 객체의 경우 메모리 힙 영역에 저장이 되어 내부 프로퍼티를 변경해도 같은 참조를 갖고 있다. 따라서 객체의 특정 프로퍼티만 변경하는 작업을 수행하면 React에서는 변경이 일어나지 않았다고 인식하여 리렌더링이 일어나지 않는다. 따라서 리렌더링을 일으키려면 React에 이전의 참조와 다른 참조로 변경되었음을 알려야 한다. 참조를 바꾸는 방법은 여러 가지가 있지만 이 글에서는 간단하게 2가지 방법만 알아보겠다. 먼저 첫 번째 방법은 Object.assign() 메서드를 이용하는 방법이다. const obj = { a: 1, b: 2 }; const obj2 = Object.assign({}, obj); console.log(obj === obj2); Object.assign() 은 첫 번째 객체 인자 이후의 모든 객체 인자를 합쳐주는 메서드이다. 첫 번째 인자인 빈 객체({})에 obj의 프로퍼티들을 담아 새로운 객체를 반환하기 때문에 기존 obj와 다른 것을 알 수 있다. 두 번째 방법은 스프레드 연산자를 이용하는 방법이다. const obj = { a: 1, b: 2 }; const obj2 = { ...obj }; console.log(obj === obj2); 마찬가지로 새로운 객체에 obj의 프로퍼티를 담았기 때문에 기존 obj와 다른 참조를 가진 것을 확인할 수 있다. 그럼 이제 이 두 가지 방법을 쓰면 React의 리렌더링을 자유자재로 다룰 수 있을까? 다음은 방금 소개했던 두 방법으로 막을 수 없는 예제를 알아보자. const obj = { a: 1, b: { c: 2 } }; 이제는 obj가 프로퍼티로 객체를 가지고 있다. const obj