9월 29일 수요일

기존 코드 읽기에 지쳐가던 찰나
단비같은 소일거리 공통 컴포넌트로 분리하기!! 미션이 주어졌다 😆
진심으로 행복했음..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
keen-slider로 구현한 스와이프 캐러셀이 공통으로 세 개 정도 쓰이는 것 같아서 common component로 빼는 업무였는데,
그냥 슬라이더 자체만 뺄지, 아니면 그 하위에 들어갈 아이들까지 같이 뺄지가 심히 고민되었다 🤔
전자는 간단히 빼면 되지만 나중에 사용 할 때 귀찮을 것 같고, 후자는 그럴거면 공통으로 빼는 행위가 의미가 있는건지, 그런게 고민이다. 정말 별게 다 고민인 얼레벌레 주니어;
6*6으로 정렬된 그리드 박스가 슬라이더 한 페이지인데, 그게 공통으로 쓰이는 줄 알았건만 css 스타일링이 다 다르게 구현 되어있는게 아니겠는가... 그래서 그거먼저 통일을 시켜야할지? 그런것들이 고민되었다.
역시 남의 코드를 건드리는건 정말 쉬운 일이 아닌 것 같다.
그래도.. 해봐야지 뭐! 그리고 내일 여쭤보자...

일단 남들이 공통 컴포넌트/재사용 컴포넌트를 어떻게 짜는지 참고하기 위해 찾아본 레퍼런스들

• https://kyounghwan01.github.io/blog/React/common-component/#%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC-%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-import
• https://ko.reactjs.org/docs/composition-vs-inheritance.html
• https://javascript.plainenglish.io/reactjs-reusable-components-by-props-children-df6d77d69a98
• 관심사 분리를 위한 프레젠테이션, 컨테이너 컴포넌트 구분하기

  😎 프레젠테이션 컴포넌트의 정의
  - 비즈니스 로직을 넣지 않은 컴포넌트
  - 상태값이 없는 컴포넌트 단, 마우스 오버와 같은 UI 효과를 위한 상탯값은 제외