component관련 질문있습니다.

처음 만난 리액트(React)

해결된 질문

작성

270

수정됨

안녕하세요 🙂

React 첫 인강을 소플님의 강의로 시작했습니다.

소플님의 인강을 들으면서 유튜브에 올라오는 React 사이드 프로젝트들을 따라하고 있는데 component관련에서 궁금한 사항이 생겨서 늦게나마 질문을 올립니다.

예시) Main component 안에 Button // List // Write 3개의 component가 있다고 가정한다면

소플님은 먼저 3개의 작은 component들을 만들고 조합하여 Main component를 완성한다고 말씀하셨습니다.(재사용성 떄문)

그런데 어떤분들은 먼저 Main component에서 3개의 작은 component 내용들을 전부다 쓰고 마지막에 3개를 분리하여 각각 해당 component들에 나눠담으시던데

먼저 큰 컴포넌트를 레이아웃을 구성해서 작은 컴포넌트에 나눠 담는게 맞는건지

작은 컴포넌트들을 조합해서 큰 컴포넌트를 만드는게 맞는건지 알 수 있을까요?

React 처음으로 완강했는데 너무 유익한 강의였습니다 감사합니다:)

HTML/CSS javascript react

답변 1

Inje Lee (소플)

지식공유자

안녕하세요, 소플입니다.

작은 컴포넌트를 먼저 구현하고 전체 페이지를 만들어 나가는 것과,

전체 페이지를 먼저 구현한 이후에 컴포넌트를 추출하는 방식은 각각의 장단점이 있을 것 같습니다.

먼저 작은 컴포넌트를 먼저 구현하는 방식은 처음부터 어떤 컴포넌트가 필요할지 이미 다 알고 있어야 하며,
각 컴포넌트의 재사용성도 고려하면서 개발해야 하기 때문에 입문자 분들에게는 약간 어렵게 느껴질 수 있습니다.
반면에 컴포넌트를 추출해내는 방식은 일단 페이지를 내 맘대로 만들어보고,
이후에 재사용 가능한 형태로 컴포넌트를 추출하는 것이기 때문에 상대적으로 쉽게 느껴질 수 있습니다.

하지만 어떤 방법이 정답이다 라는 것은 없으며, 두 가지 방식을 모두 다 경험해 보는 것이 좋습니다.
초반에는 먼저 페이지를 구성하고 컴포넌트를 추출하는 연습을 해보시는 것이 좋고,
컴포넌트 구현이 어느정도 익숙해지신 이후에는 처음부터 간단한 컴포넌트를 먼저 만들면서 구현을 해나가시면 됩니다.

그리고 아무리 익숙해지더라도 실제 프로젝트에서는 다양한 형태의 복잡한 화면들이 나오게 되기 때문에,
디자이너와의 손발이 100% 맞지 않는 이상 모든 컴포넌트를 처음부터 설계하고 구현하기는 쉽지 않습니다.
(개발과 친숙한 디자이너는 컴포넌트 단위로 디자인을 해주는 경우도 있긴 합니다.)
그래서 일반적으로 많이 사용하는 버튼, 입력폼 등의 단순한 컴포넌트는 먼저 만들어 두고,
복잡한 화면은 일단 되는대로 구현한 이후에 조금씩 컴포넌트를 추출하는 형태로 개발하게 됩니다.

제 강의에서는 두 가지 방식을 모두 다 실습해볼 수 있도록 포함되어 있는데,
익숙해지실 때까지 여러번 반복해서 실습해보시면 좋습니다.

그리고 아래와 같은 UI 라이브러리의 컴포넌트 목록을 참고하셔서,
어떤 컴포넌트들이 주로 재사용 되는지 잘 익혀두시면 도움이 되실 겁니다.
실제로 비슷하게 구현까지 해본다면 실력 향상에 더없이 큰 도움이 되겠죠ㅎㅎ

https://chakra-ui.com/docs/components

아무쪼록 제 강의가 도움이 되셨다니 뿌듯하네요~
이후에도 개발하시다가 궁금한 점이 있다면 언제든지 아래 FrontOverflow에 질문 남겨주세요😀

https://www.frontoverflow.com/

감사합니다.