코드숨 리액트 6기 2주차 회고
둘째주에는 첫째주에 배웠던 JSX문법과 선언형 프로그래밍에 대한 지식을 기반으로 본격적으로 React 라이브러리를 설치하고 React component들로 이루어진 앱 개발을 실습했습니다.
먼저 과제를 시작할 때는 다음과 같은 부분을 주로 고민하면서 개발에 임했습니다.
- Custom hook
아직 테스트 코드에 대한 수업을 듣지 못해서 막연하지만 순수하게 state와 state를 변경하는 두 종류의 값, 함수들만을 반환하는 custom hook을 view를 담당하는 컴포넌트에서 분리했습니다. 이렇게 하면
- state를 변경하는 함수를 호출한 이후 state가 의도한대로 잘 변경됐는지만 확인하면 되는 테스트 코드를 작성하기도 수월해지고,
- 추후에 UI가 변경되더라도 핵심 비즈니스 로직을 담당하는 custom hook 내부의 코드는 변경사항이 최소화될 것 같다고 생각했습니다.
2. 추상화 수준의 통일
추상화 수준이 섞여있는 코드는 가독성이 떨어지기 때문에 가급적이면 같은 파일에서는 같은 추상화 수준의 컴포넌트들로 구성하도록 고민했습니다.
3. default parameter 설정
이번 과제는 Typescript 환경이 아니기 때문에 함수나 컴포넌트를 호출하는 쪽에서 파라미터를 생략할 경우 Runtime error가 발생할 수 있고, 상식적인 선에서 추론이 가능한 default 값들은 번거롭게 선언해주지 않더라고 편리하게 사용할 수 있도록 선언부에서 default parameter들을 설정해주었습니다.
복잡도가 너무 높은 과제는 아니었기 때문에 금방 해결할거라고 생각했지만 이후에 받은 리뷰에서 고려하지 못했던 부분들을 트레이너분께서 많이 짚어주셨습니다.
Custom hook에서 전달받는 parameter는 object 형식으로 전달받아서 사용하도록 해주면 해당 함수를 사용하는 사람이나 코드를 읽는 사람이 보다 명확하게 함수의 의도를 파악하기 쉬워질 수 있다는 점, 오히려 의도하지 않은 방법으로 함수를 사용했을 경우 개발과정의 런타임에서 에러를 발생시키는것이 배포 이후에 의도하지 않은대로 동작하면서 발생하는 문제보다 적은 비용으로 문제를 해결할 수 있다는 피드백은 특히 인상깊었습니다!
또 컴포넌트들을 적절하게 분리하고 어떤 props를 어떤 이름으로 전달하고 전달 받을지에 대한 고민도 많이 됐던 것 같습니다. 이 부분은 앞으로도 계속 고민하면서 개선해 나아가야 할 부분이라 여러 사람들의 의견과 코드를 참고해가면서 공부해보려고 합니다:)