✏️Achievement Goals

✅ 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
✅ 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
✅ DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

📝summary

구조화된 CSS가 필요하게 된 이유

프로젝트의 규모, 복잡도가 커지고 함께 작업해야할 팀원 수의 증가와
모바일이나 태블릿을 비롯한 다양한 디바이스들의 등장함으로 웹사이트들이 다양한 디스플레이를 커버해야 했다

따라서 CSS 작업을 효율적으로 하기 위해 CSS를 작성하는 일관된 패턴이 필요하게 되었고
이런 문제점들을 해결하기 위해 SASS, BEM 등이 존재한다

어플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화(encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)의 중요성을 불러왔고
CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생했고
CSS-in-JS에는 대표적으로 Styled-Component가 있다

Styled-Component

Styled Component 는 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어 졌고
Styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다

예를 들어 어플리케이션 내에 다른 웹페이지로 이동하는 기능을 가진 Button 을 만들어 보면 밑의 코드와 같이 만들 수 있다

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

Styled-Component 사용법

1. JavaScript에서 변수를 선언하듯이(혹은 React 에서 컴포넌트를 만들듯이) Button 을 만들고
2. tag 의 속성을 정의하고 (여기서는 a tag)
3. 백틱 (``) 안에 기존 CSS 문법으로 스타일 속성을 정의해 주면 된다

Styled-Component 설치

npm install --save styled-components

권장사항
아래의 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여주기 때문에 package.json에 다음 코드를 추가하도록 권장하고 있다

{
  "resolutions": {
    "styled-components": "^5"
  }
}