컴포넌트 설계.. 😑
컴포넌트 기반인 React로 입문하고나서 나의 뇌는 컴포넌트란 "작고 재사용이 가능한 코드조각", "앱을 이루는 최소 단위"라고 입력이 되어서 멈춰버렸다.
현재 회사에선 react가 아닌 vue를 사용하고있는데 이미 뇌에 굳혀저버린 컴포넌트 개념 때문에 vue를 사용하면서 컴포넌트 설계에 많은 혼란을 겪고 있는 중이다..😂
컴포넌트라 하면 객체지향 프로그래밍 방식처럼 컴포넌트를 부품으로 취급하여 만들고 연결 & 조립하여 전체 앱을 완성한다는 느낌이라 한 페이지에 해당하는 완성된 html 코드를 받으면 이걸 여러 작은 컴포넌트로 분할하고싶은 욕구에 사로잡히게 된다.
그래서 현재 제작중인 프로젝트의 회원가입 페이지를 나의 뇌에 굳혀진 컴포넌트 설계 방법으로 분할을 하여 만들어 보았다. 반복되는 구조인 바깥 컴포넌트와 그안에 input-item 컴포넌트 총 2개의 컴포넌트로 분할하였다.만들고 보니 v-for로 컴포넌트를 반복하는 구조라 template 부분은 엄청 단순해져서 보기 좋아졌지만 데이터를 주고받는게 문제였다.
이 때 삽질이란 느낌이 쌔게 왔지만 vuex로 데이터를 처리하고 점점 의식에 흐름대로 코드를 작성하다보니 내가 1시간 아니 30분 뒤에 보면 이 코드를 이해 못할것 같아서 삽질을 인정하고 모두 롤백하였다.
이 삽질을 통해 배운점은 컴포넌트를 설계할때 데이터 흐름을 생각안하면 내가 만들었던 컴포넌트처럼 마크업만 찢어 놓은 의미없는 컴포넌트가 된다는 것!!
컴포넌트의 핵심은 컴포넌트 안에서 어떻게 데이터를 넘기고 이벤트를 올려서 다른 컴포넌트와 상호작용을 할것인가이다.
다음번에 컴포넌트를 설계할때는 첫번째로 이 핵심을 먼저 생각하며 만들어 봐야겠다.
사수개발자님 말처럼 컴포넌트 설계방식은 정답이 있는것이 아니며 그저 많이 만들어보고 나만의 스타일을 만드는 것 그게 정답인것 같다.
열심히 공부해야겠다.😁
오늘의 띵언
만일 우리가 독립성을 가치있게 여긴다면, 현재 체제의 지식, 가치, 사고방식에 내 생각을 맞추려는 경향이 점점 늘어나는 것이 불안하다면, 우리는 자신의 유일함에 대해, 스스로 방향을 잡아가는 방법에 대해, 자발적으로 학습하는 법에 대해 배울 수 있는 환경을 조성하고자 할 것이다.
- 칼 로저스(Carl Rogers). 『On Becoming a Person』
