Section3 Unit3 [React] Custom Component

출처: https://www.linkedin.com/pulse/how-components-taking-over-world-varun-vachhar

---

Section3 Unit3 [React] Custom Component

 

📌 Chapter1. Component Driven Development

• Component Driven Development(CDD, 컴포넌트 주도 개발)는 컴포넌트부터 시작하여 마지막 화면에 이르기까지 상향적(bottom-up)으로 UI를 개발하는 과정으로, UI를 구축할 때 직면하게 되는 규모의 복잡성을 해결하는 데 도움을 준다. 

 

6월 원티드 프리온보딩에서 들었던 상향식 컴포넌트 개발과 하향식 컴포넌트 개발.

이번달 강의가 우연히도 부트캠프 수업 내용과 맞아서 컴포넌트 주도 개발과 Storybook에 대한 강의였다.

현업에서 일하는 비교적 연차가 낮은(?) 개발자들의 눈높이에 맞춘 듯해서 아직은 어려운 내용이 많지만, 뭔가 듣는 것 만으로도 도움이 많이 되어서 매월 재밌게 듣고 있는 중 :)

(7월은 Next.js라 가벼운 마음으로 들어볼 생각이닷..!!)

 

여튼 원티드에서 들었던 내용을 정리해보자면,

 

---

<상향식 컴포넌트 개발과 하향식 컴포넌트 개발>

상향식 컴포넌트 개발 (Bottom👆🏻Up)

( 💬 주로 상향식 컴포넌트 개발을 많이 한다고 한다.)

• 가장 작은 단위의 하위 컴포넌트들을 먼저 개발

• 작은 하위 컴포넌트들을 조합하여 전체적인 컴포넌트를 완성

• 일반 사용자뿐만 아니라 개발자도 사용할 수 있는 것을 고려해야 한다.

• 숙력도가 부족한다면 YAGNI 에 빠지기 쉽다.

   → You Aren't Gonna Need It : 정말 필요할 때까지 그 기능을 만들지 말라.

 

• Bottom Up 예시

   - 작고 하찮을 정도로 귀여운 컴포넌트 ➡️ Next.js Page 로

   - Atomic 디자인 패턴을 예로 들자면, Atom(원자) ➡️ Molecule(분자) ➡️ Organism(유기체) ➡️ Template(템플릿) ➡️ Page(페이지)

 

• 덧붙여 스토리북과 함께 상향식 컴포넌트 개발을 한다면, 아래와 같은 과정을 참고하면 될 것 같다 👀

  1. 하나의 세트 구성 ➡️ 사용될 컴포넌트 + CSS 스타일링 + 사용될 스토리북

  2. 사용될 컴포넌트를 내보내고(export), 스토리에서 사용될 컴포넌트를 가져온다(import)

      → 컴포넌트(Component.jsx) 🧡 스토리(Component.stories.js)

  3. 사용될 컴포넌트들은 Storybook이 무엇인지 모르게 만들어 주는것이 좋다.

  4. 다른 개발자에게 내 컴포넌트가 어떻게 사용될까?를 상상하며 개발하게 된다.

 

하향식 컴포넌트 개발(Top👇🏻Down)

• 하향식 컴포넌트 개발은 전체 시스템의 큰 구성 요소들을 먼저 개발

• 이후 중복되는 작은 컴포넌트를 분리하거나 공통 혹은 교차되는 컴포넌트를 분리

• 전체 시스템의 디자인과 구조를 먼저 구성하고, 이를 바탕으로 세부적인 요소들을 개발

• 컴포넌트를 만들때는 npm dev 즉, 사용자가 보는 동일한 환경으로 개발한다.

  → 개발자가 아닌 정말 출시된 사용자를 위해 개발을 하며 컴포넌트를 분리

• 르블랑의 법칙 (Leblance’s Law)

   → Later equals never. 나중은 결코 오지 않는다. 한번 작성한 쓰레기 코드를 나중에 수정하는 일은 결코 없다.

 

•  Top Down 예시

   - Next.js Page ➡️ 작고 하찮을 정도로 귀여운 컴포넌트로

   - Atomic 디자인 패턴을 예로 들자면, Page(페이지) ➡️ Template(템플릿) ➡️ Organism(유기체) ➡️ Molecule(분자) ➡️ Atom(원자)

 

---

 

📌 Chapter2. CDD 개발 도구

 

• styled components는 CSS in JS를 가능하게 하는 스타일 작성 라이브러리로, 특정 스타일이 첨부된 컴포넌트를 구축할 수 있도록 도와준다. 이 스타일은 첨부되는 컴포넌트에만 영향을 미치고 다른 컴포넌트에는 전혀 영향을 미치지 않는다는 장점이 있다. 

• Storybook은 UI 개발을 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있도록 도와준다. 또한 테스트 및 개발 속도를 향상하는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.

 

📌 Chapter3. useRef

• useRef는 컴포넌트가 일부 정보를 기억하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 할 때 사용할 수 있지만 많은 경우 DOM 요소를 참조하기 위해 사용한다.

 React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없지만 가끔 특정 노드에 포커스를 옮기거나, 스크롤 위치를 옮기거나, 위치와 크기를 측정하는 등 DOM 요소에 접근해야 할 때가 있다. React는 이러한 작업을 수행하는 내장 방법을 제공하지 않기 때문에 DOM 노드에 접근하기 위해 ref가 필요하다.

 useRef는 따로 정리해서 글을 쓰면 좋을 것 같다..😊

 

 

---

🌙  오늘의 회고

 CDD와 styled component, 스토리북에 대해서 학습했다. 올해 초부터 매달 들어온 원티드 프리온보딩의 6월 주제가 우연히도 <스토리북과 함께하는 컴포넌트 주도 개발> 이었다. 이번 토요일까지로 2주 동안의 총 4번의 강의가 마무리되었는데, 스토리북을 처음 접하는데다가 vite로 작업을 하고, 당연히 모르는 부분이 많이 나와 쉽지 않았지만 전체적인 흐름을 볼 수 있어서 공부가 되었다고 생각한다. 여튼, 원티드 프리온보딩에서 스토리북을 접해서 그런지 이번 유닛에서 스토리북이 나오는 것을 알고는 신기했던 것 같다. 이름이라도 한 번 들어보고, 설치라도 해봐서 그런지 좀 더 편안한 느낌은 들었다.

 리액트가 점점 더 흥미로워지고 있다. 더 다양한 툴을 활용하고, 더 많은 기능을 효율적으로 구현할 수 있도록 더 많이 공부해야겠다.

 

📅 6.18 SUN

 스토리북이 흥미로워서 일요일에 사용법에 좀 더 익숙해지고 싶어 공부를 했는데, 아직도 잘 모르겠다. 스토리북과 styled component를 사용하는 과제가 내일부터 있는데, 미리 구현해보니 styled component의 활용도 내가 잘 사용하지 못하는 듯 했고(Pure CSS 처럼 구현하게 된다..!!!), 스토리북은 아예 어떻게 해야할지 접근조차 쉽지 않았다 🥲 이번 과제를 하며 익숙해져 봐야지…