[💻 코드스테이츠 FE 44기][React] Custom Component

✔️ 시작

CSS를 좀 더 효율적으로, 구조적으로 작업하기 위해 필요한 Styled component가
등장하기 전 어떤 것을 다뤄 작업했는지 학습했다.

---

📍 배운 것

Component Driven Development(CDD)

• 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행 할 수 있다.
• 재사용 할 수 있는 UI컴포넌트를 이용하는 것

CDD를 활용한 개발 방법은 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발과 가깝다.

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

• 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야하는 팀원들도 많아짐에 따라
  CSS를 작성하는 일관된 패턴이 없다는 것 (일관된 패턴이 없음)
• 모바일이나 태블릿 등 다양한 디바이스들의 등장 (복잡도 증가)

CSS 작업을 효율적으로 하기위해 구조화된 CSS의 필요성이 대두 되었다.

CSS 전처리기(CSS Preprocessor)의 등장

• CSS가 구조족으로 작성될 수 있게 도움을 주는 도구
• CSS의 문제점들을 프로그래밍 개변(변수, 함수, 상속 등)을 활용해 해결
• CSS 전처리기에 맞는 Comiler를 사용해야 실제로 우리가 사용하는 CSS문서로 변환 된다.

이를 통해 CSS파일들을 구조화 할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생겼다.

✔️ SASS(Syntactically Awesome Style Sheets)

• CSS를 확장해 주는 스크립팅 언어
• CSS를 JavaScript 처럼 특정 속성(color, margin 등)의 값(#fff, 25rem 등)을 변수로 선언해 필요한 곳에 선언된 변수를 적용할 수 있다.
• 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 한다.

SCSS 코드를 읽어서 전처리한 다음 컴파일 후 전역 CSS 번들 파일을 만들어주는 전처리기 역할을 한다.

/*
* 반복되는 CSS코드가 있다면 변수를 활용해 재사용이 가능하다.
* 변수를 선언할 때는 $기호를 활용한다.
*/
$base-color: #fff;

.alert { 
	border: 1px solid $border-dark
}
.button { 
	color: $border-dark
}

❗️컴파일된 CSS의 용량이 증가

• 전처리기가 내부에서 어떤 작업을 하는지 알지 못한 채 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어 내는 것에 의지하게 되었다.

CSS 방법론의 대두

• CSS 전처리기의 문제를 본완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두 되었다.

CSS 방법론 지향점

• 코드의 재사용
• 코드의 간결화(쉬운 유지보수)
• 코드의 확장성
• 코드의 예측성(클래스명으로 의미 예측 가능)

여러 팀원이 함께 작업하는 상황일 때 CSS 작성 방법을 규칙으로 정해두는 것은 매우 중요한 요소이다.

✔️ BEM

• Block, Element, Modifier로 구분해 클래스명을 작성하는 방법
• Block, Element, Modifierd은 각각 -와 __로 구분한다.
• 클래스명은 BEM 방식의 이름을 여러번 반복해 재사용할 수 있다.
• HTML/CSS/SASS 파일에서도 더 일관된 코딩 구조를 만들어 준다.

.header__navigation--navi-text{
	color: red;
}
/*
* header => Block
* navigation => Element
* navi-text => Modifier
*/

• Block: 전체를 감싸고 있는 블럭 요소 ➡️ header
• Element: 블럭이 포함하고 있는 한 조각 ➡️ navigation
• Modifier: 블럭 또는 요소의 속성 ➡️ navi-text
  (블록이나 엘리먼트의 외관이나 상태를 변화가능하게 하는 부분)

❗️ 문제점

• 클래스명 선택자가 장황해진다.
• 긴 클래스명 때문에 마크업이 불필요하게 많아졌다.
• 재사용 할 때 마다 모든 UI 컴포넌트를 명시적으로 확장해야 했다.
• 캡슐화 개념이 없었다.
• 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없었다.

✔️ CSS-in-JS의 등장(Styled Component)

• 기능적(Function), 상태를 가진 컴포넌트들로 부터 UI를 완전히 분리해 사용할 수있는 단순한 패턴을 제공

import styled from "styled-components";

const input = styled.input`
	width: 100px;
	margin: 1rm;
`
export default function Form(){
	return(
    	<>
        	<Input />
        </>
    )
}

CSS 방법론들의 특징, 장단점

	특징	장점	단점
CSS	기본적인 스타일 방식	-	일관된 패턴 갖기 어려움, !important 남용
SASS	컴파일된 CSS를 만들어내는 전처리기	변수, 함수, 상속 개념을 활용해 재사용 가능, 구조화	전처리 과정 필요, 디버깅 어려움, 컴파일한 CSS파일 거대해짐
BEM	클래스명 작성에 일관된 패턴을 갖는	네이밍으로 문제 해결, 전처리 과정 X	선택자 이름 장황, 클래스 목록 많아짐
Styled Component	컴포넌트 기반 CSS작성할 수 있는 라이브러리	CSS를 컴포넌트 안으로 캡슐화, 네이밍/최적화 신경 X	빠른 페이지 로드 불리

---

✏️ 마치며

CSS를 좀 더 효율적으로, 구조적으로 작업하기 위해 필요한 Styled component가
등장하기 전 어떤 것을 다뤄 작업했는지 학습했다.

JavaScript, React만 신경 쓰다 스타일적 부분인 CSS에 대한 신경은 쓰지 않았던거 같다.
이번 학습을 통해 CSS에 대한 문제점과 이를 개선하기 위해 어떤 기능 들이 생기게 되었고
현재는 어떤 코드로 작성하는게 추세인지 알 수 있었다.

게시물 내용이 길어져 나눠서 업로드 예정