FrontOverflow FrontOverflow

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어 이번 글에서는 Redux의 Container에 대해서 알아보도록 하겠습니다. Container는 컴퓨터공학 내에서도 여러가지 의미로 사용되기 때문에 혼동하지 않는 것이 중요합니다. 영어 단어 Contain은 무언가를 포함한다는 뜻을 갖고 있습니다. 마찬가지로 Redux의 Container도 무언가를 포함하는 것을 나타내는데, 그 무엇은 바로 Redux의 state와 dispatch입니다. state가 없는 리액트 컴포넌트를 그냥 껍데기라고 한 번 해보겠습니다. 이 컴포넌트에 실제 사용자가 원하는 데이터를 표시하기 위해서는, 어딘가에서 데이터를 가져다가 집어넣어줘야 하겠죠. 여기에서 데이터는 바로 state를..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어 이번 글에서는 Redux의 Reducer에 대해서 알아보도록 하겠습니다. 먼저 Reducer는 단어 자체가 생소한 분들이 많을 것입니다. 비슷한 단어로 JavaScript의 배열에 존재하는 reduce함수를 떠올리시는 분도 있을 거라고 생각합니다. reduce라는 영어 단어는 '줄이다', '축소하다' 라는 뜻을 갖고 있습니다. 비슷한 맥락으로 Reducer는 뭔가를 축소시키는 주체를 의미한다고 볼 수 있겠죠. Redux에서 Reducer는 Action들을 실제로 실행하는 역할을 하는 함수를 의미합니다. Reducer는 아래와 같은 순서대로 Action을 처리하게 됩니다. 현재 Redux Store의 stat..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어 이번 글에서는 Redux의 Action과 Action Creator에 대해서 알아보도록 하겠습니다. 먼저 Action이라는 영어 단어는 어떤 행동을 하는 것을 의미합니다. Redux에서의 Action은 어떤 상태(state)의 변화를 주기 위한 행동을 의미합니다. 예를 들면, Redux를 사용해서 카운트 수를 저장하는 Counter 애플리케이션에서, 카운트 수를 올리거나 내리는 등의 행동을 Action이라고 볼 수 있겠죠. 그렇다면 실제 Redux Action은 어떻게 생겼을까요? Action이라고 해서 거창한 무언가가 있는 것이 아니라, 그냥 단순한 JavaScript 객체입니다. 다만, type이라는 문..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 이번 글에서부터 총 4편에 걸쳐서 Redux의 기초 개념들을 정리해보려고 합니다. 먼저 첫 번째로 Redux의 Store에 대해서 알아보도록 하겠습니다. 컴퓨터공학에서 Store는 보통 저장소라는 의미로 많이 사용됩니다. 비슷한 단어로 Storage라는 단어를 많이 들어보셨을 거라고 생각합니다. Redux에서도 Store라는 개념이 등장하는데, 여기에서도 동일하게 저장소라는 의미를 갖고 있습니다. 즉, Redux Store는 Redux의 state들이 저장되는 저장소를 의미합니다. Redux를 사용하는 가장 큰 이유 중 하나는 각 컴포넌트에서 선언해서 사용하던 state들을 모아 한 곳에서 관리하기 위함입니다. 그리고 이렇..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 이번 글에서는 redux-devtools에 대해서 알아보도록 하겠습니다. redux-devtools는 이름에 담긴 의미 그대로, Redux를 사용해서 개발할 때 디버깅을 도와주는 도구입니다. 보통 Redux를 사용해서 개발하다 보면 action과 reducer들이 굉장히 많아지게 되는데, 그렇게 되면 어떤 action들이 실행되어서 현재의 state가 되었는지 파악하기가 굉장히 어렵습니다. 짧은 시간에 수많은 action들이 빠르게 실행되기 때문이죠. 또한, 각각의 action들의 내부 payload를 파악하기도 힘들고, 해당 action으로 인해 state에 어떤 변화가 생겼는지를 파악하기도 힘듭니다. 그래서 나온 것이 ..