공부하는 비오

React-redux를 사용해 todolist를 만들기 위한 세팅. react에서 redux를 사용할땐 react-redux를 추가해줘야 한다. 페이지여러개를 만들거기 때문에 react-router-dom도 추가. (react-router-dom은 다른 페이지에서 설명) routes라는 폴더를 만들어주고, 화면이 달라질 때 표시할 컴포넌트별로 나눠줌. Redux를 사용할 것이기 때문에 store도 따로 분리. index Provider을 사용해 store을 props로 사용. store todo list를 만들어줄 state와 함수들. dispatch에 사용할 함수들을 export 해줌. export store. Home.js store에 연결해주어야함. connect 필요. Home(props) Rea..

Redux 2020. 11. 19. 12:02

** 주의사항 : state 값을 바꿀 땐, mutate를 할 수 없다. ㅡmutate란 인터넷에 있는 정의로는 파생변수를 생성할 때 사용하는 함수. 쉽게 이야기하자면 array의 값을 바꾸는 메서드는 사용할수 없다는 이야기다. 이를테면, state.push 이런거. state를 바꿀때는 새롭게 정의해주어야 한다. 즉 state가 배열이라면, 배열의 새로 정의해야함. dispatch에 사용할 action들은 함수로 만들어 reducer위쪽에 정리. reducer에서 state를 변경할 땐 mutate를 사용할 수 없다. react에서 필요를 느껴서 공부시작한건데, 여기까지 공부해본 결과 vanilla javascript에서는 왜 많이 안쓰는지 알겠다. 물론 코드가 복잡해지면 필요가 있을수도 있겠지만...

Redux 2020. 11. 18. 18:14

reducer을 통해서만 state의 변경이 가능하다. reducer는 state와 action을 인자로 가진다. reducer가 반환하는 모든 값은 state 값이 된다. action에 따라 state이 변경이된다. action은 store와 이야기하기위한 도구이다. action은 dispatch를 통해 값을 가진다. ***store은 state를 저장하는 저장소*** store에 action이 일어나는지를 확인하려면, subscribe를 사용하면 된다. subscribe는 store에 변화가 생기면, 자동으로 그 변화에 따라 렌더링을 진행한다. dispath가 action 값을 정의한다.

Redux 2020. 11. 18. 15:32

state가 변경된 값을 렌더링하기 위해서는 subscribe가 필요하다. store.subscribe( 함수 ); subscribe : store에 변화가 일어날 때(state값이 변경될 때) 자동으로 실행됨. Add버튼을 눌러 state값이 변경되었을 때, subscribe가 실행된 것을 확인할 수 있다. 위와 같이 사용할 경우 변화된 state값을 가져올 수 있음.

Redux 2020. 11. 18. 15:14

state의 변경을 위해서는 action과 dispatch를 함께 사용해야한다. const reducer = (state, action) => { ... return state }; store.dispatch({ type: '...action type...' )} action은 reducer의 두번째 argument로 사용된다. dispatch를 통해 action의 값을 설정해준다. action은 반드시 type을 가진 객체여야하므로, dispatch는 항상 { type: ... } 이런 모습을 가진다. *** type만 있다면 원하는 데이터를 넣어도 된다. 예) store.dispatch({type: add, id: 1, text: 'hello'}) *** action을 log로 찍어봤을때, dispa..

Redux 2020. 11. 18. 15:04

redux를 사용하기위해서는 터미널에서 'npm add redux' 라고 명령어를 입력해주면 된다. const reducer = (state) => { return state }; const store = createStore(reducer); createStore : 변하는 data인 state를 저장하는 store을 만들어줌. 반드시 reducer 메서드가 포함되어야한다. reducer : satate의 값을 바꿔주는 함수. reducer가 리턴하는 값은 모두 state. 위의 화면과 같이 reducer가 'hello'를 리턴하는 경우, 'hello'가 store의 state가 됨. argument를 위와 같이 설정할 경우, state의 기본값을 설정해 줄 수 있다. 참고로 reducer의 이름은 꼭..

Redux 2020. 11. 18. 15:01

리덕스는 어플리케이션을 예측가능하도록 만들어준다. 예측가능하기 때문에, 어플리케이션의 복잡성이 낮아지고, 그로 인해 똑같은 어플리케이션을 만들어도 리덕스를 사용하면 훨씬 피로도가 낮다. 또한 더 복잡한 어플리케이션을 보다쉽게 만들 수 있다. ** 주로 react와 함께 사용하지만 react 한정 라이브러리는 아니다. 즉 vanilla Javasript와도 사용가능하다. 리덕스의 특징. 1. 모든 어플리케이션이 하나의 상태(store)를 가짐. 즉 하나의 객체(store) 안에 어플리 케이션에 필요한 정보(state)가 있다. 2. state는 외부로부터 철저하게 차단되어 관리된다. 마음대로 store에 접근해서 state를 바꿀 수 없다. 오직 담당자(reducer)를 통해서만 데이터를 수정하고 가져가는..

Redux 2020. 11. 16. 11:25