문학주 4주차 과제 #64
문학주 4주차 과제 #64
Conversation
| export default connect( | ||
| state => ({}), | ||
| dispatch => ({ | ||
| globalActions: bindActionCreators(globalActions, dispatch), |
There was a problem hiding this comment.
redux를 컴포넌트와 연결해서 사용할때 고려해야할 사항중 하나는 이 컴포넌트가 컨테이너인가 프리젠테이셔널인가 입니다!
현재 Todo컴포넌트의 경우에는 프리젠테이셔널 컴포넌트로 사용하고 있기 때문에 두가지 선택을 할수 있습니다
- Todo컴포넌트를 컨테이너컴포넌트로 만든다(containers 폴더로 이동시킨다)
- Todo의 부모 컴포넌트에서 액션을 불러서 Todo에 props로 전달해 준다.
두가지 선택지가 있을것 같은데요!
지금 같은 상황에서는 2번의 선택지가 좀더 알맞은 상황입니다!
그 이유를 보자면 컨테이너컴포넌트와 프리젠테이셔널 컴포넌트를 나누는 기준은 다양 하지만 그중에 하나가,
props가 쓸데없이 여러 단계를 거쳐 전달되는가 입니다.
현재 상황에서 보자면 그렇지 않기 때문에 굳이 여러 컴포넌트에 redux를 연결할 필요가 없습니다!
컨테이너 컨포넌트와 프리젠테이셔널 컴포넌트의 차이에 대한 글입니다!
https://blueshw.github.io/2017/06/26/presentaional-component-container-component/
globalActions를 사용하신건 좋은 방법입니다!
다만 actions을 쪼갤때 이부분에서 액션들을 쪼개서 전달해주시는게 좋습니다.
dispatch -> ({
addTodo: bindActionCreators(globalActions.addTodo, dispatch),
removeTodo: bindActionCreators(globalActions.removeTodo.dispatch),
})
이렇게 해주시면 나중에 이 컴포넌트에서 어떤 액션들을 사용하는지 한눈에 보기도 쉽고, 불필요한 코드를 줄일수 있습니다!
| handleSubmit = e => { | ||
| e.preventDefault(); | ||
| const text = this.state.todo; | ||
| const todos =this.props.todos; |
There was a problem hiding this comment.
const { todos } = this.props
이런 식으로 객체분해를 이용하시면 좋습니다!
|
|
||
| handleDelete = e => { | ||
| console.log('ss'); | ||
| } |
| return ( | ||
| <div> | ||
| <form onSubmit={this.handleSubmit}> | ||
| <div onClick={this.handleDelete}> |
There was a problem hiding this comment.
요기서 사용하시는 this.handleDelete 함수는 안쓰이는것 같습니다!
| //action creator | ||
| export function addTodo(todo,todos) { | ||
| // 배열의 마지막녀석 id값을 가져옴 | ||
| const lstNoteId = todos.length !== 0? todos[todos.length -1].id : 0; |
There was a problem hiding this comment.
action 생성자는 action을 생성하는 역할만해야 합니다.
여기서 action을 생성할때는 view(container component)로 부터 전달받은 데이터만 사용해야 합니다.
그 이유는 역할을 명확하게 구분해서 복잡성을 줄이기 위함인데요.
지금 처럼 액션에 데이터를 변경하는 로직을 넣어 두고, 리듀서에서도 계산해주고, 컴포넌트에서도 값을 계산해서 전달해 주고 이러면 코드가 복잡해 집니다!
그래서 변화는 리듀서가, 어떤값이 변해야 하는지 계산과 전달은 컴포넌트에서 해주셔야 합니다.
위에 작성하신 코드는 컴포넌트에서 실행할때 배열의 마지막 녀석을 계산해서 action에 보내주시는게 좋은 방법입니다!
| return { | ||
| type: ADD_TODO, | ||
| todo: todo, | ||
| id:lstNoteId+1 |
There was a problem hiding this comment.
이 부분도 위와 마찬가지로 데이터를 8번째 줄에서 계산해 주시고 이번에 16번째줄에서도 계산을 해주시면,
비슷한 일을 하는 역할인데 관련된 일을 하는 코드들이 코드상 여기저기 존재하게 됩니다.
이렇게 되면 나중에 문제가 발생했을때 디버깅하기가 어려워지고, 버그가 생길 확률이 높아집니다!
| }); | ||
| case REMOVE_TODO: | ||
| return { | ||
| todos: state.todos.filter(v => v.id !== action.id) |
There was a problem hiding this comment.
reducer는 store로 부터 state를 전달 받아서 새로운 state를 반환해주는 역할을 합니다.
이유는 나중에 디버깅 할때 변화전 state와 변화후 state를 비교하기 위함입니다.
여기서 말하는 새로운 state는 개발자가 만들어서 전달을 해줘야 하는데요!
15번째줄을 보시면 제가 Object.assign()이라는 함수를 사용한걸 보실수 있습니다.
이는 store로부터 전달받은 state를 복사해서 새로운 state를 만들어서 새로운 state에 변화를 주는 것입니다.
그래서 이부분도 마찬가지로 아래와 같이 구현해주시는게 좋습니다
return Object.assign({}, state, {
todos : [ ...state.todos, state.todos.filter(v=> v.id !== action.id()]
})
2 participants
문학주 4주차 과제