한 것
- 카운터앱 만들기
- 투두 앱 만들기
느낀것
- 관심사의 분리라는 개념이 처음에는 어렵게 느껴졌지만 계속 시도해보고 코드리뷰를 받다보니 처음보다는 어떤것을 의미하는지 알것같다. 뭔가 공장같기도 하다. 서로 할일을 나눠서 그 할일에만 집중하는듯한?.. 내가 약통에 약을 채워서 보내면 너는 포장만해 너는 약이 몇개 들었는지 알필요없어😅 이런 느낌?..
App
에서 상태만 관리하고 자식컴포넌트들은 상태를 받아 그리는데만 집중하니 상태값이 뭔가 추가가되도 App
에서만 수정하면 되니 훨씬 효율적인것 같다. 뭔가 에러가 났을때 컴포넌트의 연결관계를 파악할 필요없이 상태를 관리하는 App
만 확인하면 되니 에러를 잡을때도 좋은것 같다!
- 질문을 많이할수록 뭔가 내가 얻어가는게 많은 것 같다. 다른 수강생 분들 코드리뷰도 계속 참고하면서 이해가 안가는 부분에대해 질문을 하니 내가 놓쳤던 부분에 대해서도 새로 알게되어 너무 좋다. 피드포워드를 받았을때
수정할게요
로 끝내지말고 이해가 안가는 부분이 있다면 반드시 한번더 질문을 해야겠다.
- 슬랙에 질문글을 한번 올려보았는데 좋은 답변들을 많이 받았다. 앞으로도 궁금한게 있을때 질문을 잘 정리해서 슬랙에 올려보아야겠다 ㅎㅎ
배운것
- export한 모듈을 import를 이용해 가져올때 확장자를 생략하는 방법
- 비지니스 로직의 관심사는 상태와 상태를 관리하는 함수이고, UI로직의 관심사는 받은 것을 그리는 것이다.
내가 하는 행위가 어떤 결과를 불러오는지 정확히 알고 진행
해야 한다. 그냥 무작정 분리하지말고 왜
컴포넌트를 분리하는지, 분리했을때 장, 단점
이 무엇인지에 대해 생각해보고 상황에 맞게 분리해야된다
하나의 모듈
은 하나의 책임
을 가져야 한다 - SRP(단일책임원칙)
- 컴포넌트를
props
로 넘길 수 있다.
&&
는 결과를 불분명하게 만들 위험이 있다
setState
자체를 자식컴포넌트에 넘기게 되면 상태 값이 어디서 어떻게 변경되는지 예측이 안되므로 우리가 의도한대로
변경이 될 수 있게 핸들러 함수를 만들어서 전달하자
- 핸들러 네이밍은
handle
접두사를 사용한다(handleEvent, handleSubjectEvent), 핸들러를 props
로 받을땐 on
접두사를 사용한다(onEvent, onSubjectEvent) => 이렇게 설정하면 이벤트 핸들러 역할을 한다는 의도를 드러낼 수 있다.
- 컴포넌트가
범용적
으로 만들어질수록 구조
가 단순
해지고 재사용성
이 높아진다
- 관심사가 잘 분리되어있으면 구조와 코드를 읽기가 훨씬 좋아진다