공부하는 비오

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. connect( mapStateToProps, mapDispatchToProps ) (현재component); connet는 두가지 인자를 가진다. mapStateToProps와 mapDispatchToProps. mapStateToProps는 store에서 state를 가져오는 함수. 이 함수가 반환하는 값은 Component의 props로 사용된다. mapDispatchToProps는 store에서 dispatch를 사용하도록 가져오는 함수. 이 함수가 반환하는 값도 props로 사용된다. store Home dispatch를 props로 가져왔으므로, dispatch(addTodo((text))와 같이 사용하면, store에서 dispatc..

Redux 2020. 11. 19. 14:29

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

**커스텀훅은 useInput과 같이 'use' 로 시작하는 단어로 함수를 만들어 사용할 수 있다. useInput을 쓰지 않았을 때와 작동하는 기본원리는 같음. 하지만 useInput 함수 안에서 한번에 state와 onChange 메서드를 관리 할 수 있다. 그리고 함수로 만들었기 때문에 재사용성이 높다. 커스텀 훅은 HOOK의 원리를 이용해서 리팩토링하는거라고 생각해도 될듯. vanilla javascript 코드 짤때에도 함수의 중복성을 줄일 수 있으면, 함수로 묶고 매개변수를 주듯이, 커스텀훅도 같은 원리. 유효성체크까지 더한 경우. 10글자까지만 입력되도록 설정(maxLen).

React 2020. 11. 16. 19:59