Redux

data의 흐름을 일방향화 하여 산재되어있는 구조와 흐름을 정리해주고, 이에 따른 코드의 유지보수와 무결성을 높여주는 도구. React와 이름이 비슷하여 혼동할 수 있으나, React와는 완전히 별개의 라이브러리이다.Redux를 활용하기 전 Javascript 코드의

아래 기술하는 Redux state의 3가지 원리는 단순히 redux 상태관리에 적용되는 걸 넘어, React hooks 등과 같은 상태관리에도 적용될 수 있는 항목임을 기억한다.redux에서 저장되는 data는 유일하게 store에서만 저장되고 활용할 수 있다."상태

reducer / store 개념을 종합하여 버튼을 눌렀을때 값이 변화하는 logic을 구현해본다.HTML에서 생성한 버튼 tag(속성)에 click 이벤트를 추가하고,클릭 시 action dispatch를 발동해서 state + 1 을 하도록 구현한다.위 코드에서ad

문자열을 입력받아 화면에 나타나도록 하는 logic을 구현해본다.기본적인 store, reducer 등 redux 구조 및 HTML을 구성한다.화면을 먼저 구성하고, 각 tag 속성을 정의하여 준다.form tag 안에 input / button을 넣는다.input t

Redux 공식문서에 나타난 action 분기처리는 대부분 switch 분기처리로 되어있다.따라서 if 분기처리보다는 switch를 통한 분기처리를 해주는 것이 깔끔하고 가독성이 더 좋다.위 if분기처리로 작성되어있는 reducer action을 이처럼 switch-c

1. Redux와 React의 활용방안 > React는 Virtual DOM, 기본적으로 DOM(html)에서 변화한 부분만 rendering 한다. ※ react는 변경사항을 rendering 한다. > Redux는 data를 store에 저장하고, 이를 redu

component의 unique 인자 등 props를 전달받는 방법 정리요청 url(path)에서 기본 path를 제외한 부분을 통해 인자를 얻어오는 방법위 경로처럼 Home 화면의 path가 path = "/" 이고Home 다음의 Detail 등의 화면의 path가

Redux에서 특정 기능들을 제공하는 packageRedux 코드에서 계속 반복되는 함수생성, switch 분기처리 등 이에 소요되는 반복도를 줄이고 코드를 간결하기위해 redux에서 제공하는 일종의 package(라이브러리)이다.action 전달 시 객체를 전달하거나

reducer를 더 간결하고 직관적으로 생성해주고내부적으로 state mutation을 용이하게 해주는 기능을 제공한다.(※ 특히 기존 reducer의 switch 분기처리를 대신하여 코드를 간결하게 구성 가능)switch-case 분기처리를 createAction 함