인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

힝구님의 프로필 이미지

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

immer 도입하기

RTK에서 draft, state 차이가 있나요?

작성

·

69

·

수정됨

0

강의 들으면서 제로초님 RTK GitHub 코드도 보고 있는데요. RTK는 immer가 내부적으로 사용되어 state를 써도 불변성을 자동으로 처리하는 걸로 알고 있습니다. 그런데 https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/reducers/user.js에선 리듀서 마다 state를 쓰는 곳이 있고 draft를 쓰는 곳이 있어서 질문합니다!

역할은 같지만 단지 코드를 명시적이고 의도를 나타내기 위해 구분해서 쓰는 것이라고 생각되는데 구분해서 쓰는 다른 이유가 있는지 궁금합니다.

답변 2

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

아뇨 차이없습니다. 코드 두 개를 합치다가 저렇게 서로 다르게 변수명이 지어진 것 같네요

힝구님의 프로필 이미지
힝구
질문자

아하 그렇군요. 답변 감사합니다!

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다.

RTK(Redux Toolkit)에서 immer는 불변성을 유지하면서 상태를 변경하기 쉽게 해주는 유용한 라이브러리입니다. immer 덕분에 RTK에서 상태를 업데이트할 때 draft를 사용하면 마치 “제자리에서” 상태를 변경하는 것처럼 코드를 작성할 수 있지만, 실제로는 불변성을 유지하면서 상태가 변경됩니다.

statedraft의 차이:

  1. draft 사용: 기본적으로 immer의 기능을 활용하여 불변성을 손쉽게 유지하며 상태를 업데이트할 수 있습니다. draft는 변경 가능한 상태를 나타내며, immer에 의해 자동으로 불변하게 처리됩니다.

  2. state 사용: 기존의 불변성을 수동으로 관리하는 방식입니다. state를 다루는 코드는 draft와 비교했을 때 명시적으로 불변성을 처리하기 위한 개발자의 개입이 필요할 수 있습니다.

일반적으로 RTK를 사용할 때는 immer의 기능 덕분에 draft를 사용하는 것이 더 직관적이고 간편합니다. 하지만 코드의 의도나 팀의 코드 작성 스타일에 따라 state를 명시적으로 사용하는 경우도 있습니다. 이는 코드의 명확성을 높이거나, 특정한 상황에서 의도적으로 불변성을 수동으로 처리하고자 할 때 나타날 수 있습니다.

참고 링크

제로초님의 GitHub Redux Toolkit 리듀서 코드에서도 draftstate의 사용 사례를 찾아보실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

힝구님의 프로필 이미지

작성한 질문수

질문하기