리덕스 리덕스는 무엇일까 리덕스는 한마디로 말해 데이터 저장소이다. 조금 더 풀어말하면 상태관리 라이브러리다. 조금 더더 풀어말하면 전역 상태관리를 편히 할수있게 해주는 녀석이다. 를 터미널에 때려넣어준다 리덕스에서 컴포넌트가 데이터를 읽어오게 하게끔 하려면 리액트-리덕트도 필요하다 1. 데이터를 전부 볼려고 하는 녀석들이 있다 2. 수정하려는 녀석들도 있다 3. 수정하려는 녀석이 수정을 하면 수정 후 데이터를 다른... React리덕스리액트reduxReact REDUX 전역 데이터 저장소 라고 보면 된다. 형제관계에서는 데이터를 주고받을 수 없다. 피치못할 사정으로 자식컴포넌트에서 부모 컴포넌트로 데이터를 넘겨줘야 할때 이 상황을 피할 수 있도록해준다. 자식 컴포넌트 사슬구조가 100개정도 되는데 최하위 컴포넌트에서만 부모컴포넌트의 데이터를 필요로 할 때 해당 컴포넌트에만 데이터를 넘겨줄 수 있다. 전역으로 누구나 볼 수 있는 데이터가 저장된 곳 그 데이터... 드리덕스리액트프론트엔드전역 데이터 저장소드 [JS] Generator 함수 이해하기 처음 이 개념을 접할때, 함수면 함수지 제너레이터 함수는 뭐지 싶었다. 이 함수가 존재한다는 사실은 자바스크립트 참고 서적을 통해서 처음 접했고, 그 당시에는 이 개념이 필요한가 싶어서 그냥 눈으로 훑고 지나가는 정도로 넘어 갔었다. 프로젝트를 진행하면서 리덕스 사가를 사용하는데, 마주할 일이 없을거라 생각했던 함수가 두두 등장... 그렇게 Generator function에 대해서 부랴부랴... 자바스크립트리덕스리덕스 [React]리덕스(2) 흐름 바닐라 자바스크립트 이용 UI 관리하는 라이브러리를 이용하지 않기 때문에 DOM 직접 가리키는 값 선언해줌. index.html styles.css index.js 액션 이름 : 문자열, 대문자, 유일하게 존재 액션 이름을 사용하여 액션 객체를 만드는 액션 생성함수를 만들었음. reducer 함수가 맨 처음 호출될 때, state는 undefined : 이 경우에 initialState를 기... redux리액트리덕스ReactReact 2주차(목) - 프리 온보딩 코스 프론트엔드 - Redux ⇒ 리드미 참고 👀 ⇒ 대부분 면접관이 이렇게 생각함 뷰(화면)과 모델(데이터)을 연결하는 것을 의미. setState 할 필요가 없음 ⇒ 쓰면 그 순간에 모델을 바꾼다 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳이라고 생각하면 쉽다. 단방향 데이터 흐름(unidirectional data flow)이 핵심. 사용자에 의해 Action이 발행되면, 해당 Action에 영향이 있는 모든 ... 위코드프론트엔드프리온보딩리덕스원티드리덕스 Redux 정리(1) 액션 객체를 만들어 주는 함수 매번 액션 객체를 직접 작성할 수 없으므로 함수를 만들어서 관리한다. 리듀서(reducer): 변화를 일으키는 함수 액션을 만들어 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 스토어 안에는 현재 애플리케이션 상태, 리듀서가 들어가 있으며, 몇가지 중요한 내장 함수를 지닌다. 디스패치:스토어의 내장 함수 중 하나, "액션을 발생시... redux리액트리덕스Reactmern stackreact reduxReact 리덕스 내용 정리 이후 1. store store가 하는 일은 기본적으로 data를 넣을 수 있는 장소를 생성 store 만들면 reducer 필요 (createStore는 reducer 필요) reducer가 return하는 것이 어플리케이션의 state 3. action store -> dispatch -> action 리덕스가 reducer를 부르고 dispatch를 통해서 action 수행 store ... 리덕스리덕스 리덕스로 전역에서 상태관리하기(리팩토링) 리팩토링을 진행하는 이유 2차 프로젝트에서 팀 프로젝트로 진행한 에어비앤비 웹사이트는 검색형식의 네브바를 가지고 있는데 라우터가 넘어갈 때마다 검색바의 값들을 유지해주는 것이 중요했다. 프로젝트를 진행할 적에는 router 객체의 state 부분에 필요한 위치, 체크인 아웃 날짜, 게스트 인원 수를 담아서 라우터가 넘어감에 따라 상태 값을 꺼내오는 방법을 택했는데 라우터 url에 따라 상태 ... React리덕스위코드WeCode리팩토링redux프로젝트React (Redux) Normalizing State Shape 마크업을 미리 진행하게 되고 더 나아가 대략 추측 가능한 구조를 기반으로 더미 데이터를 API 응답으로 활용할 수 있다. 예를 들어, username: 'user1'의 값을 업데이트 한다면, 어떻게 될까? user1을 가지고 있는 다른 요소를 찾아서 같이 업데이트 해줘야 한다. 결과적으로 {post1}, {post2-comment} 두 요소를 찾아서 똑같이 업데이트 해주어야 한다. 추가적으로... redux리덕스React리엑트React 리액트 리덕스 셋팅(툴킷x)정리 이번에 redux-toolkit이 나오면서 이전에 셋팅하던 리덕스를 정리하고자 글을남김. step 1. 리덕스 설치 step 2. 리듀서 생성후 리듀서 리턴 step 3. 루트 리듀서 셋팅 스토어에 리듀서를 등록하는데 리듀서는 한 개만 등록할 수 있음. 루트 리듀서에 등록한 리듀서를 한 개의 객체로 감싸서 스토어에 등록. step 4. 액션파일, 리듀서 스토어 등록 액션 및 액션생성함수 파일... 리액트리덕스리덕스 [말로 풀어쓴 React] 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기1 17.3.1.2 액션 생성 함수 만들기 17.3.1.3 초기 상태 및 리듀서 함수 만들기 17.3.2 todos 모듈 만들기 17.3.2.2 액션 생성 함수 만들기 17.3.2.3 초기 상태 및 리듀서 함수 만들기 17.3.3 루트 리듀서 만들기 17.4.2 Provider 컴포넌트를 사용해 프로젝트에 리덕스 적용하기 17.5 컨테이너 컴포넌트 만들기 17.5.1.2 액션 생성 함수를 불러와... 리액트리덕스상태관리리덕스
리덕스는 무엇일까 리덕스는 한마디로 말해 데이터 저장소이다. 조금 더 풀어말하면 상태관리 라이브러리다. 조금 더더 풀어말하면 전역 상태관리를 편히 할수있게 해주는 녀석이다. 를 터미널에 때려넣어준다 리덕스에서 컴포넌트가 데이터를 읽어오게 하게끔 하려면 리액트-리덕트도 필요하다 1. 데이터를 전부 볼려고 하는 녀석들이 있다 2. 수정하려는 녀석들도 있다 3. 수정하려는 녀석이 수정을 하면 수정 후 데이터를 다른... React리덕스리액트reduxReact REDUX 전역 데이터 저장소 라고 보면 된다. 형제관계에서는 데이터를 주고받을 수 없다. 피치못할 사정으로 자식컴포넌트에서 부모 컴포넌트로 데이터를 넘겨줘야 할때 이 상황을 피할 수 있도록해준다. 자식 컴포넌트 사슬구조가 100개정도 되는데 최하위 컴포넌트에서만 부모컴포넌트의 데이터를 필요로 할 때 해당 컴포넌트에만 데이터를 넘겨줄 수 있다. 전역으로 누구나 볼 수 있는 데이터가 저장된 곳 그 데이터... 드리덕스리액트프론트엔드전역 데이터 저장소드 [JS] Generator 함수 이해하기 처음 이 개념을 접할때, 함수면 함수지 제너레이터 함수는 뭐지 싶었다. 이 함수가 존재한다는 사실은 자바스크립트 참고 서적을 통해서 처음 접했고, 그 당시에는 이 개념이 필요한가 싶어서 그냥 눈으로 훑고 지나가는 정도로 넘어 갔었다. 프로젝트를 진행하면서 리덕스 사가를 사용하는데, 마주할 일이 없을거라 생각했던 함수가 두두 등장... 그렇게 Generator function에 대해서 부랴부랴... 자바스크립트리덕스리덕스 [React]리덕스(2) 흐름 바닐라 자바스크립트 이용 UI 관리하는 라이브러리를 이용하지 않기 때문에 DOM 직접 가리키는 값 선언해줌. index.html styles.css index.js 액션 이름 : 문자열, 대문자, 유일하게 존재 액션 이름을 사용하여 액션 객체를 만드는 액션 생성함수를 만들었음. reducer 함수가 맨 처음 호출될 때, state는 undefined : 이 경우에 initialState를 기... redux리액트리덕스ReactReact 2주차(목) - 프리 온보딩 코스 프론트엔드 - Redux ⇒ 리드미 참고 👀 ⇒ 대부분 면접관이 이렇게 생각함 뷰(화면)과 모델(데이터)을 연결하는 것을 의미. setState 할 필요가 없음 ⇒ 쓰면 그 순간에 모델을 바꾼다 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳이라고 생각하면 쉽다. 단방향 데이터 흐름(unidirectional data flow)이 핵심. 사용자에 의해 Action이 발행되면, 해당 Action에 영향이 있는 모든 ... 위코드프론트엔드프리온보딩리덕스원티드리덕스 Redux 정리(1) 액션 객체를 만들어 주는 함수 매번 액션 객체를 직접 작성할 수 없으므로 함수를 만들어서 관리한다. 리듀서(reducer): 변화를 일으키는 함수 액션을 만들어 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 스토어 안에는 현재 애플리케이션 상태, 리듀서가 들어가 있으며, 몇가지 중요한 내장 함수를 지닌다. 디스패치:스토어의 내장 함수 중 하나, "액션을 발생시... redux리액트리덕스Reactmern stackreact reduxReact 리덕스 내용 정리 이후 1. store store가 하는 일은 기본적으로 data를 넣을 수 있는 장소를 생성 store 만들면 reducer 필요 (createStore는 reducer 필요) reducer가 return하는 것이 어플리케이션의 state 3. action store -> dispatch -> action 리덕스가 reducer를 부르고 dispatch를 통해서 action 수행 store ... 리덕스리덕스 리덕스로 전역에서 상태관리하기(리팩토링) 리팩토링을 진행하는 이유 2차 프로젝트에서 팀 프로젝트로 진행한 에어비앤비 웹사이트는 검색형식의 네브바를 가지고 있는데 라우터가 넘어갈 때마다 검색바의 값들을 유지해주는 것이 중요했다. 프로젝트를 진행할 적에는 router 객체의 state 부분에 필요한 위치, 체크인 아웃 날짜, 게스트 인원 수를 담아서 라우터가 넘어감에 따라 상태 값을 꺼내오는 방법을 택했는데 라우터 url에 따라 상태 ... React리덕스위코드WeCode리팩토링redux프로젝트React (Redux) Normalizing State Shape 마크업을 미리 진행하게 되고 더 나아가 대략 추측 가능한 구조를 기반으로 더미 데이터를 API 응답으로 활용할 수 있다. 예를 들어, username: 'user1'의 값을 업데이트 한다면, 어떻게 될까? user1을 가지고 있는 다른 요소를 찾아서 같이 업데이트 해줘야 한다. 결과적으로 {post1}, {post2-comment} 두 요소를 찾아서 똑같이 업데이트 해주어야 한다. 추가적으로... redux리덕스React리엑트React 리액트 리덕스 셋팅(툴킷x)정리 이번에 redux-toolkit이 나오면서 이전에 셋팅하던 리덕스를 정리하고자 글을남김. step 1. 리덕스 설치 step 2. 리듀서 생성후 리듀서 리턴 step 3. 루트 리듀서 셋팅 스토어에 리듀서를 등록하는데 리듀서는 한 개만 등록할 수 있음. 루트 리듀서에 등록한 리듀서를 한 개의 객체로 감싸서 스토어에 등록. step 4. 액션파일, 리듀서 스토어 등록 액션 및 액션생성함수 파일... 리액트리덕스리덕스 [말로 풀어쓴 React] 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기1 17.3.1.2 액션 생성 함수 만들기 17.3.1.3 초기 상태 및 리듀서 함수 만들기 17.3.2 todos 모듈 만들기 17.3.2.2 액션 생성 함수 만들기 17.3.2.3 초기 상태 및 리듀서 함수 만들기 17.3.3 루트 리듀서 만들기 17.4.2 Provider 컴포넌트를 사용해 프로젝트에 리덕스 적용하기 17.5 컨테이너 컴포넌트 만들기 17.5.1.2 액션 생성 함수를 불러와... 리액트리덕스상태관리리덕스