부트캠프 46일차 (컴포넌트 주도 개발 (CDD), Styled Components )

오늘의 생각

오늘도 개념 위주의 학습이었다.

 

컴포넌트 주도 개발과 CSS(방법론) 발전의 역사를 배웠는데, 매우 흥미로웠다.

 

출처: How to use CSS Media Query Breakpoint in Styled-Components (참조)

 

특히 CSS 방법론의 경우 내가 모두 사용해 봤었던 방법들이었기 때문에 그 서사를 좀 더 온전히 이해할 수 있었던 것 같다. 신기한 점은 각 방법론의 문제점들이 해당 방법론을 배우고 사용하는 과정에 내게도 크게 와 닿았던 점들이라는 것.

 

또한 다소 생소했던 Styled Component에 대해 좀 더 온전히 이해하게 되면서 경이로움을 느낄 정도였다. HTML, JS, CSS를 하나로 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발이라니...이래서 프론트엔드 개발자가 리액트를 해야 하나 싶었다.

 

 

storybook도 매우 유용했다.

 

CDD개발 도구임에도 거의 웹 페이지나 다름 없는 사용자 경험을 제공한다는 점에 깜짝 놀랐다. 이를 통해 컴포넌트 주도 개발이 한층 더 쉬워질 수 있겠다는 점에서 고개를 끄덕일 수밖에 없었다.

 

물론, 온전히 잘 쓸 수 있나? 라는 질문에는 회의적이다.

 

실습을 통해 개념을 익히고 이해하려고 노력했지만, js 파일 위에 stories.js 파일을 하나 더 만들어야 하고, 관련 문법을 숙지하고 있어야 한다는 점에서 유용한만큼 어려운 UI 개발 도구라고 생각했다.

 

하지만 이론을 잘 이해해도 막상 적용할 때는 또 잘 안 될 때가 많으니, 앞으로 자주 쓰고 연습해서 리액트에서만큼은 Styled Component와 storybook을 온전히 습득하고 애용해야겠다고 다짐했다.

 

마지막으로 배운 useRef는...아직 잘 모르겠다. 솔직히 이해가 잘 안 됐다. 관련 기술 블로그를 더 읽어 보고 많이 써봐야겠다.

 

---

오늘의 키워드

컴포넌트 주도 개발: Component-Driven Development (CDD), SASS(Syntactically Awesome Style Sheets), BEM(Block, Element, Modifier), Styled-Component (CSS-in-JS), Storybook, useRef

 

---

오늘의 학습내용

• 컴포넌트 주도 개발(CDD)의 정의 및 장점
• 구조화된 CSS가 필요하게 된 이유
• CSS 방법론의 정의와 종류들 (SASS, BEM, Styled-Component)
• 각 방법론들의 공통 지향점과 장단점
• Styled Components의 장점 및 props를 활용한 사용법, 전역 스타일 설정
• Storybook의 이해와 장점, 쓰는 이유
• useRef 함수의 정의 및 필요한 상황

---

어려웠던 keyword / 활용한 질문

 

Q. 왜 CDD를 활용한 개발 방법이 상향식 개발에 적합한가요?

 

A. CDD가 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식이기 때문입니다. 리액트는 개발 시 디자인을 보고 컴포넌트 계층 구조로 분해하는 상향식 개발 방식이기 때문에 CDD를 사용해야 데이터 흐름을 방해하지 않습니다.

 

Q. useRef 함수는 어떨 때 사용해야 하고, 왜 조심해서 다뤄야 하나요?

 

A. useRef 함수는 DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조할 때 등의 상황에서 사용할 수 있습니다. React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에 지양해야 합니다.

 

---

참조

• How to use CSS Media Query Breakpoint in Styled-Components