본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Libraries/Redux

 (6)
[Redux] Redux와 React를 연동하기 목차 1. Container2. react-redux3. provider4. mapStateToProps()5. mapDispatchToProps()6. connect()7. 가장 많이 하는 실수8. Redux와 React 연동 과정  React와 Redux를 연동하기 위한 개념들을 알아보자!      1. Container  Container는 Redux를 리액트에 연동했을 때 사용하는 개념이다.(Redux에는 Container라는 개념이 없음)여기서 Container는 Container Component의 줄임말이며, 컴포넌트는 리액트 컴포넌트를 의미한다.결국, Container는 Redux의 일부 state와 dispatch를 포함하는 리액트 컴포넌트이다.Container의 정의를 그림으로 나타내면..
[Redux] Reducer 목차 1. Reducer란?2. Reducer의 규칙3. Immutable Update4. 복잡한 state 객체를 업데이트 하는 경우5. CombinedReducers()   Reducer에 대해서 알아보자!       1. Reducer란?  - Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수- Action은 State에 변화를 주기 위한 행동이다. 따라서, Reducer는 State에 변화를 주는 역할을 한다.- Reducer는 현재 state를 기반으로 새로운 state를 만들어서 리턴한다.// Reducer는 현재 State와 Action을 파라미터로 받아서 새로운 State를 만들어 리턴한다.(state, action) => newState 예) 배열에 아이템을 넣고 ..
[Redux] Action 목차 1. Action이란?2. Action과 Reducer의 관계3. Action 생성자 (Action Creator)4. Action의 Dispatch 과정     Redux의 action에 대해서 알아보자!       1. Action이란?   1) Action의 정의  - Redux State(store에 저장돼있는 데이터)에 변화를 주기 위한 행동  - Action은 상태를 변경하기 위해 반드시 사용되는 순수 객체(Pure Object)이다.- 무엇을 해야 하는지(명령)를 나타내며, 상태 변경의 유일한 출발점이다.   2) Action의 구성요소  - type: 액션의 종류를 나타내는 문자열 (필수)- payload: 상태를 변경하는 데 필요한 데이터 (선택) { type: 'ADD_TODO'..
[Redux] Dispatch Redux의 dispatch에 대해서 알아보자!      Redux Dispatch의 개념과 역할  Dispatch : 발송하다, 파견하다.Dispatcher : 발송하는 역할을 하는 것Dispatch는 Action을 발송하는 역할을 한다!발송한 Action의 수신자는 바로 Redux이다!즉, Action이 발생했다는 것을 Redux에게 알리는 역할을 하는 것이다.   Flux Architecture의 전체 구성도를 보면, 오른쪽 위에 Dispatcher가 위치하고 있다.Action이 생성되면 해당 Action이 Dispatcher로 전달되고, Dispatcher는 Action을 Redux로 보내서 처리하도록 만든다.그리고 Redux가 Action을 받아서 상태를 변경하게 된다.     Dispatch ..
[Redux] Store 목차 1. Redux Store란?2. Store와 데이터3. Store의 역할4. Store의 특징5. Store의 구성 요소6. Store의 생성 방법7. Store의 사용법 (핵심 메서드)8. Store의 중요성  Redux의 Store에 대해서 알아보자!    1 . Redux Store란?  store: 저장하다, 보관하다.store은 Redux의 데이터들을 저장하기 위한 저장소이다.Store를 통해 애플리케이션에서 사용되는 모든 상태를 하나의 객체로 관리하며,  상태를 효율적이고 예측 가능하게 다룰 수 있다.그러나 여기서 오해하면 안되는 것이, Redux Store의 데이터들은 실제로 저장장치에 저장되는 것이 아니다.아래에서 자세히 살펴보자.     2. Store와 데이터  • State m..
[Redux] Redux의 개념, 탄생 배경, 3가지 원칙, Context Api와의 비교 Redux에 대해서 알아보자!     1. Redux란?  Redux는 2015년, JavaScript 개발자인 Dan Abramov와 Andrew Clark에 의해 탄생한 상태 관리 라이브러리이다. 이 도구는 애플리케이션의 상태를 예측 가능하고 일관성 있게 관리하기 위해 만들어졌다.     2. Redux의 탄생 배경   1) 복잡한 상태 관리하기 위해  단일 페이지 애플리케이션(SPA)의 인기가 높아지면서, 컴포넌트 간 상태를 효율적으로 공유하고 관리하는 것이 점점 더 어려워졌다. 특히 React를 사용하는 프로젝트에서 상태를 props를 통해 자식 컴포넌트로 전달하거나, 서로 다른 컴포넌트 간 상태를 동기화하는 과정이 번거롭고 비효율적이라는 문제가 있었다.   2) Flux 아키텍처의 한계를 극복하..

티스토리툴바