과제 2 - 간단한 Todo App 만들기 #94
Conversation
moonkii
left a comment
moonkii
left a comment
There was a problem hiding this comment.
다른 사람들의 PR도 보면서 공부하는 자세 되게 좋은 것 같아요 👍
좋은 부분은 배우고 따라해보면서 나에게 부족한 점을 채워나가면 좋을 것 같아요.
지금처럼 하나의 파일에서 컴포넌트로 분리해보면서 파일로 분리해나가는 점진적인 방법으로 만들어 나가시는 것도 좋아요.
PR을 보내시기 전에 항상 린트를 확인해주세요!
src/index.jsx
Outdated
| import ReactDOM from 'react-dom' | ||
|
|
||
|
|
||
| function Habit({ onDelete, habit, keyValue }) { |
There was a problem hiding this comment.
클릭이벤트라는 걸 이름에 드러내주면 좋을 것 같아요.
onClickDelete~ 같은 형태로 작성해주면 좋을 것 같네요 ;)
src/index.jsx
Outdated
| return ( | ||
| <div> | ||
| {habit} | ||
| <button onClick={() => onDelete(keyValue)} type="button" >완료</button> |
There was a problem hiding this comment.
keyValue 라는 이름은 의도를 이해하기 어려운 것 같아요.
ID 같은 값을 주고 싶었던 건가요?
src/index.jsx
Outdated
| ) | ||
| } | ||
|
|
||
| ReactDOM.render(<App />, document.getElementById('app')) |
There was a problem hiding this comment.
파일 끝에 붙어 있는 ⛔️ (No newline at end of file) 를 보신적이 있으신가요??
Files changed 를 유심히 보셨다면 한 번씩은 보셨을텐데요.
항상 Pull Request를 보내고 나서 자신이 작성한 코드를 Files changed 에서 다시 한번 살펴보는 습관을 들이시길 추천해요.
파일 끝에 개행을 추가하지 않으면 파일 끝에 ⛔️ (No newline at end of file) 경고 문구가 붙어요.
파일 끝에 개행을 추가 하는 이유는 예전에는 컴파일러가 파일 끝에 개행문자가 없으면 한 줄이 끝나지 않은 것으로 인식해서 에러가 발생하는 이슈가 있었기 때문이에요.
최근에는 파일 끝에 개행문자가 없어도 컴파일러에서 별다른 문제가 발생하지 않지만 혹시나 모를 잠재적인 에러나 POSIX 에 명세되어 있기 때문에 개인적으로는 파일 끝에 개행문자를 추가 하시길 권장해요.
There was a problem hiding this comment.
저번에도 같은 것을 리뷰 받았었어서 vscode 설정을 바꿔보았었습니다.
그 설정이 자동으로 한줄 띄워줄줄 알았는데 아니었네요..
계속 신경써서 한 줄 띄겠습니다
src/index.jsx
Outdated
| setState({ | ||
| habits: [e.target[0].value, ...habits] | ||
| }) |
There was a problem hiding this comment.
| setState({ | |
| habits: [e.target[0].value, ...habits] | |
| }) | |
| setState({ | |
| ...state | |
| habits: [e.target[0].value, ...habits] | |
| }); |
만약 객체에 habits 말고 다른 상태 속성이 있으면 어떤 일이 발생할까요?
There was a problem hiding this comment.
그럼 habits만 남겠네요.. 리뷰 감사합니다!! 수정했습니다!
src/index.jsx
Outdated
| setState({ | ||
| habits: [e.target[0].value, ...habits] | ||
| }) | ||
| e.target[0].value = ""; |
There was a problem hiding this comment.
event 객체를 상위 컴포넌트에서 처리해야할까요?
관심사의 분리에 대해 고민해보시면 좋을 것 같아요!
There was a problem hiding this comment.
리뷰해주신 것 바탕으로
event 객체를 Page에 컴포넌트로 옮겼습니다.
왜냐하면 Page컴포넌트에 Input 컴포넌트도 있는데
form 형태를 그리는 Input 컴포넌트와 데이터를 다루는 부분을 보기쉽게 분리하고자 하였습니다.
There was a problem hiding this comment.
제가 의도한건 이벤트 객체를 실제 입력을 받는 Input 컴포넌트에서 처리하는 것이었어요.
예를들어
하위컴포넌트에서는
export default function TodoField({ onChange, ... }) {
function handleChnage(event) {
const { value } = event.target;
onChange(value);
}
return ( .... );
}상위 컴포넌트에는
export default function App() {
function handleChangeTodo(value) {
....
}
return (
...
<TodoField onChange={handleChangeTodo} ... />
);
}이런식으로 작성해주면 App 컴포넌트에서 상태를 변경해주는 함수는 하위 컴포넌트와 의존성이 끊어지기 때문에 하위컴포넌트에서 어떻게 구현되는지 알필요가 없고 단순히 값만 받아서 업데이트해주면 되는 구조를 만들 수 있어요.
There was a problem hiding this comment.
이렇게 하니 보기가 더 깔끔해졌습니다. 감사합니다.
src/index.jsx
Outdated
| }) | ||
| const { habits } = state; | ||
|
|
||
| function handleDelete(key) { |
There was a problem hiding this comment.
key 라고하면 헷갈리는 것 같아요.
의도를 드러내는 더 좋은 이름이 있을까요?
src/index.jsx
Outdated
| <input type="text" name="content" placeholder="할 일을 입력해 주세요" /> | ||
| <input type="submit" value="추가" /> |
There was a problem hiding this comment.
Input 컴포넌트를 어떻게 만들면 좋을지 리액트 공식문서 를 참고해보시면 좋을 것 같아요.
There was a problem hiding this comment.
uesEffect를 사용해야할것같은데 좀더 공부하고 내일 반영 하겠습니다!
There was a problem hiding this comment.
useEffect 는 쓸일이없어요!
제발 말한 건 input 태그 속성으로 value 를 넣어주는 걸 말한거에요.
참고:
리뷰커밋커밋할때 정말 엄밀히 해야 리뷰하시는 분께서 헷갈리지 않겠다라는게 느껴집니다. |
src/component/App.jsx
Outdated
| import Page from './Page.jsx'; | ||
|
|
||
|
|
||
| function App() { |
There was a problem hiding this comment.
export default function App() { ... } 같이 간단하게 표현해줄 수도이 있어요!
|
PR 보내시기전에 항상 린트 확인해주세요! |
|
eslint를 잘못알고 사용했었습니다.. |
[12/10]리뷰리뷰해주신 부분을 고친것 중에서 가 저에게 큰 실력향상이 된 것같습니다. 감사합니다! |
src/component/Input.jsx
Outdated
| import Habits from './Habits'; | ||
|
|
||
| function Input({ onSubmit, onClickDelete, habits }) { | ||
| const [value, setValue] = useState(''); |
There was a problem hiding this comment.
입력받은 상태도 Page 컴포넌트에서 관리해주면 좋을 것 같아요.
|
다른분들 리뷰를 참고해서 입력받은 상태도 Page 컴포넌트에서 관리 하도록 했습니다. 그런데 지금보니 Todo로 안하고 Habit으로 했었네요.. |
2 participants
리뷰
input값 가져오기
input태그에서 값을 가져올 때에 여러가지 방법이 있는 것으로 기억합니다.
그중 form태그와 연결된 함수에서 event가 매개변수로 가져오고 event의 하위 객체안에서 찾아보았습니다.
습관들 데이터 관리하기
과제1과 마찬가지로 데이터(습관들)를 하위 컴포넌트가 쉽게 공유해 쓰고 관리하고자 최상단 App 컴포넌트에 배치했습니다.
그리고 그 데이터를 활용하는 함수들도 App 컴포넌트에 배치했습니다.
고칠점
같이 참여하는 김승규 학우분께서 깃 커밋을 깔끔하게 하시는거 반성이 되고 보고 배워야겠다고 느꼈습니다.
앞으로 chore과 feature을 구분해서 커밋해야겠습니다.
읽어주셔서 감사합니다.
기능