2week#72
Conversation
- value가 넘어가지 않아서 발생한 waring (A component is changing an uncontrolled input of ...) 수정
- 심화과제
yesjin-git
left a comment
yesjin-git
left a comment
There was a problem hiding this comment.
전체적으로 아주아주 잘해주셨습니다. edit하는 부분이 어려우셨을 텐데 굉장히 잘 시도해주셨습니다.
e.relatedTarget같은 경우는 저도 이 과제를 준비하면서 알게 된 속성입니다. event객체를 잘 살펴보면 굉장히 어려운 문제들에 대한 접근 방법을 쉽게 찾을 수 있는 경우가 있는 것 같습니다. 향후에도 잘 참고해보시면 여러가지 쉬운 해법들이 나오실거라 생각합니다.
정말 고생하셨습니다. A+ 드립니다.(2주차는 어렵기 때문에 부분만 짜셔도 A+을 드립니다.)
| * save the Note with title & content | ||
| * | ||
| * @param title | ||
| * @param content |
| saveNotes = ({title, content}) => { | ||
| const {savedNotes} = this.state | ||
| const latestId = | ||
| (savedNotes.length === 0) ? -1 : savedNotes[savedNotes.length - 1].id |
| editable: true | ||
| }) | ||
|
|
||
| document.addEventListener("click", this.handleOutsideClick, false) |
There was a problem hiding this comment.
이 방식으로 event listener를 다는 것은 좋은 방식은 아닙니다. lifecycle에 따라 리스너가 제대로 적용되지 않을 수도 있고, react 내부에서 listener를 제어하기 어려워지기 때문입니다. 예를들어 이 경우는 document가 변화하지 않는 한 모든 컴포넌트에 listener가 달린채로 남아있게 되고, 컴포넌트가 사라진 경우 이를 없애기도 어렵게 됩니다.
이 경우 전체 document에 단 listener는 동적으로 생선된 dom에 리스너를 다는데 어려움을 느끼셔서 사용하셨을거라 생각됩니다. 그 용도로 있는 것이 react의 ref입니다. https://reactjs.org/docs/refs-and-the-dom.html 요부분과 답안을 참고하시면 많은 도움이 되실 것 같습니다.
| title: "", | ||
| content: "", | ||
| showContent: false | ||
| }) |
| * event handler for blur | ||
| */ | ||
| handleBlur = (e) => { | ||
| if (this.state.title === "" && this.state.content === "" && e.relatedTarget == null) { |
There was a problem hiding this comment.
이 부분 찾아내는데 어려움이 많으셨을 것 같습니다. 고생하셨습니다.
| return ( | ||
| <form onSubmit={this.handleSubmit}> | ||
| <div> | ||
| { |
There was a problem hiding this comment.
이 부분은 조건이 너무 복잡해져서 가독성을 다소 해치는 것 같습니다.
이 경우는 jsx의 부분부분을 따로 빼서 처리할 수 있습니다. 예를들어. 자세한 내용은 답안의 renderXXX 함수를 참고해주세요.
2 participants
2week/note-hw1에 과제 작성해 놓았습니다.
(2week/class는 수업시간에 했던 내용 정리해 놓은 디렉토리 입니다.)