비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

Redux FAQ: 일반

Redux는 언제 배워야 할까요?

JavaScript 개발자에게 무엇을 배울지는 압도적인 질문일 수 있습니다. 한 번에 하나씩 배우고 업무에서 마주치는 문제에 집중함으로써 선택 범위를 좁히는 것이 도움이 됩니다. Redux는 애플리케이션 상태 관리를 위한 패턴입니다. 상태 관리에 문제가 없다면 Redux의 장점을 이해하기 어려울 수 있습니다. 일부 UI 라이브러리(React 등)는 자체 상태 관리 시스템을 갖추고 있습니다. 이러한 라이브러리를 사용 중이라면, 특히 처음 사용하는 단계라면 먼저 내장 시스템의 기능을 익히는 것을 권장합니다. 애플리케이션 구축에 필요한 전부일 수 있습니다. 애플리케이션이 복잡해져 상태가 어디 저장되는지, 상태가 어떻게 변하는지 혼란스러워진다면 Redux를 배울 적기입니다.

팁

대부분의 초보 학습자는 React를 먼저 배우고, React에 익숙해진 후에 Redux를 배우는 데 집중할 것을 권장합니다. 이렇게 하면 한 번에 배워야 할 새로운 개념이 줄어들고, 어떤 개념이 React에 속하는지, 어떤 개념이 Redux에 속하는지 더 명확해집니다. 또한 Redux를 React 앱에 적용하는 방법과 Redux가 유용한 이유를 더 잘 이해하게 될 것입니다.

추가 정보

아티클

• 배우지 않아야 할 것을 결정하기

• 웹 프레임워크 학습 방법

• Redux vs MobX vs Flux vs... 정말 필요할까요?

토론

• Ask HN: 프론트엔드 학습에 압도당했는데, 어떻게 해야 할까요?

• Twitter: 추상화를 사용하는 법을 가르치려면...

• Twitter: 애초에 그 전에 배우도록 의도된 적 없습니다...

• Twitter: React 전에 Redux를 배워야 할까요?

• Twitter: 이건 제 Redux 경험이었습니다...

• Dev.to: Redux를 언제 사용해야 할까요?

Redux는 언제 사용해야 할까요?

모든 앱이 Redux가 필요한 것은 아닙니다. 어떤 종류의 애플리케이션을 구축하는지, 해결해야 할 문제 유형은 무엇인지, 어떤 도구가 직면한 문제를 가장 잘 해결할 수 있는지 이해하는 것이 중요합니다.

Redux는 공유 상태 관리를 돕지만, 모든 도구와 마찬가지로 트레이드오프가 있습니다. 가장 짧거나 빠른 코딩 방법으로 설계된 것이 아닙니다. "특정 상태 조각이 언제 변경되었으며 데이터는 어디서 왔는가?"라는 질문에 예측 가능한 동작으로 답하는 데 목적이 있습니다. 배워야 할 개념이 더 많고 작성할 코드도 더 많습니다. 또한 코드에 간접성을 추가하며 특정 제약을 따르도록 요구합니다. 단기 생산성과 장기 생산성 사이의 균형 문제입니다.

React 초기 기여자 중 한 명인 Pete Hunt의 말입니다:

Flux가 필요한 순간을 알게 될 것입니다. 필요 여부가 확실하지 않다면, 아직 필요하지 않은 것입니다.

마찬가지로 Redux 창시자 중 한 명인 Dan Abramov의 말입니다:

이 말을 수정하고 싶습니다: 바닐라 React로 문제를 겪기 전에는 Redux를 사용하지 마세요.

Redux가 가장 유용한 경우:

• 애플리케이션의 여러 부분에서 필요한 대량의 상태가 존재할 때

• 애플리케이션 상태가 빈번하게 업데이트될 때

• 상태 업데이트 로직이 복잡할 때

• 중간 규모 이상의 코드베이스를 가진 애플리케이션이며 여러 사람이 함께 작업할 때

• 상태가 시간에 따라 어떻게 변경되는지 추적해야 할 때

상태 관리, 서버 데이터 캐싱, UI 간 데이터 전달 등 Redux가 해결하는 문제와 동일한 문제를 처리할 수 있는 다른 도구들도 많이 존재합니다.

정보

Redux가 여러분의 애플리케이션에 적합한지 확실하지 않다면, 다음 자료들이 도움이 될 것입니다:

• Redux를 선택해야 할 때와 선택하지 말아야 할 때
• Redux의 도(道), 1부 - 구현과 의도
• Redux가 필요하지 않을 수도 있습니다

결국 Redux는 단지 도구일 뿐입니다. 훌륭한 도구이며 사용해야 할 충분한 이유가 있지만, 사용하지 않아야 할 이유도 존재합니다. 도구 선택에 있어 정보에 기반한 결정을 내리고, 각 결정이 수반하는 장단점을 이해하십시오.

추가 정보

문서

• Redux 사고방식: 동기

아티클

• Redux를 선택해야 할 때와 선택하지 말아야 할 때

• Redux의 도(道), 1부 - 구현과 의도

• Redux가 필요하지 않을 수도 있습니다

• Flux를 사용해야 하는 이유

토론

• Twitter: Redux를 사용하지 마세요, 언제까지?

• Twitter: Redux는 간결함이 아닌 예측 가능성을 위해 설계됨

• Twitter: Redux는 깊은 prop 전달을 제거하는 데 유용

• Twitter: 컴포넌트 로컬 상태에 만족하지 않을 때만 Redux 사용

• Twitter: 데이터가 절대 변경되지 않는다면 Redux가 필요 없음

• Twitter: 리듀서가 지루해 보인다면 Redux를 사용하지 마세요

• Reddit: 단일 페이지에서 무언가를 가져오기만 한다면 Redux 필요 없음

• Stack Overflow: Facebook Flux보다 Redux를 사용하는 이유는?

• Stack Overflow: 이 예제에서 Redux를 사용해야 하는 이유는 무엇인가요?

• Stack Overflow: Flux 대신 Redux를 사용할 때 발생할 수 있는 단점은 무엇인가요?

• Stack Overflow: React 앱에 Redux를 언제 추가해야 하나요?

• Stack Overflow: Redux vs 순수 React?

• Twitter: Redux는 재사용 가능한 요소로 커스텀 상태 관리를 구축하기 위한 개발자 플랫폼입니다

Redux는 React와만 사용할 수 있나요?

Redux는 모든 UI 레이어에서 데이터 저장소로 사용될 수 있습니다. 가장 일반적인 사용처는 React와 React Native이지만, Angular, Angular 2, Vue, Mithril 등 다양한 프레임워크용 바인딩도 존재합니다. Redux는 단순히 다른 코드에서 사용할 수 있는 구독 메커니즘을 제공합니다. 다만 상태 변화로부터 UI 업데이트를 유추할 수 있는 선언형 뷰 구현체(React 또는 유사 라이브러리)와 결합할 때 가장 유용합니다.

Redux를 사용하려면 특정 빌드 도구가 필요한가요?

Redux는 최신 자바스크립트 문법(ES2020)으로 작성되었지만 코드는 상당히 단순합니다.

구형 브라우저를 대상으로 해야 하는 경우 직접 트랜스파일링하시기 바랍니다.

counter-vanilla 예제는 Redux를 <script> 태그로 포함한 기본 ES5 사용법을 보여줍니다. 관련 풀 리퀘스트에서 언급했듯이:

새로운 Counter Vanilla 예제는 Redux가 Webpack, React, 핫 리로딩, 사가, 액션 생성자, 상수, Babel, npm, CSS 모듈, 데코레이터, 유창한 라틴어, Egghead 구독, 박사 학위 또는 'O.W.L. 우수' 수준을 요구한다는 오해를 해소하기 위해 만들어졌습니다.

아닙니다! 그냥 HTML, 정성스럽게 작성된 <script> 태그, 그리고 오래된 방식의 DOM 조작일 뿐입니다. 즐겨보세요!