[2023.04.20]-React Custom Component 구현하기

2023. 4. 21. 00:35프론트엔드 과거의 흔적

모달 창 구현 코드와 의사코드
토글 구현 코드, 의사코드

이번 과제는 React와 Styled Component를 사용해 가장 기본적이고 자주 사용되는 UI 컴포넌트를 구현해보는 과제였다.

지금까지의 과제들처럼 빈칸을 채우는 형식으로 진행되었는데, 의사코드를 적거나 머릿속으로 어떤 기능이 필요한지 떠올려보는 것은 쉬웠으나 막상 직접 코드를 타이핑해보려고 하면 어디서부터 적어야 할지 막막하기만 했다. 

아직 JSX 문법과 React 컴포넌트를 만들고 사용하는 방법, props와 state의 개념 및 활용 등 많은 부분에서 익숙하지 않기 때문이었다.

하지만 페어프로그래밍을 진행하면서 페어 분과 같이 어떤 코드를 작성해야 하는지 차근차근 고민해보고 조금씩 완성해나가는 과정에서 조금이나마 더 리액트와 자바스크립트 활용 능력을 기를 수 있었다. 또한 완성된 코드를 의사코드로 다시 한 번 정리해 보는 과정을 통해 작성한 코드들이 어떻게 동작하는지 자세하게 알아보고 깊이 이해해 볼 수 있었다.