CDD(Component-Driven Development)
재사용할 수 있는 UI 컴포넌트의 필요성이 대두됨!
컴포넌트 생성 -> 컴포넌트 결합 -> 페이지 조립
그래서 CDD가 등장함
위처럼 CDD를 사용하면
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있음.
CSS-in-JSS
- 점점 커지는 프로젝트의 규모와 복잡도, 팀원 수의 증가
- 모바일이나 태블릿을 비롯한 다양한 디바이스의 등장
=> 구조화된 CSS가 필요하게 된 이유
1. CSS 전처리기
그리고 등장한 CSS 전처리기(CSS Preprocessor) 란?
- CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
- 하지만 이 자체만으로는 웹 서버가 인지하지 못해서 Compiler를 사용해야 하고 컴파일을 하면 우리가 사용하는 css 문서로 변환이 됨.
- 가장 유명한 CSS 전처리기 SASS(Syntactically Awesome Style Sheets) = CSS를 확장해주는 스크립팅 언어
- SASS는 CSS 구조화를 해결해주지만 다른 문제들을 더 많이 만들어 냄(그 중 하나는 컴파일된 css 용량이 엄청나게 커진다는 것)
2. CSS 방법론의 대두
CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두됨.
공통 지향점
- 코드의 재사용성
- 코드의 간결화(쉬운 유지보수)
- 코드의 확장성(확장 가능)
- 코드의 예측성(클래스명으로 의미 예측 가능)
문제점
- 클래스명 선택자 장황해짐 이로 인해 마크업이 불필요하게 커짐.
- 언어 로직 상에 진정한 캡슐화의 개념이 없고 유일한 클래스명을 선택하는 거에 의존적일 수 밖에 없었음.
3. CSS-in-JS의 등장
Styled-Component
기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공함.
class, id 이름을 짓느라 고민한 적이 있다.
CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.
CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있다.
스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다
이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해주는 라이브러리가 Styled Component
Styled Component
- CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됨
Styled Components로 컴포넌트를 사용하는 방법
- 컴포넌트를 재활용해서 새로운 컴포넌트 만들 수 있음
-
props도 내려줄 수 있음
-
전역 스타일도 설정할 수 있음
ex)
import { createGlobalStyle } from "styled-components"; // createGlobalStyle를 불러옴
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`
function App() {
return (
<>
<GlobalStyle /> // 최상위 컴포넌트에서 사용해주어야 함
<Button>전역 스타일 적용하기</Button>
</>
);
}useRef
React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 한다.
하지만 DOM 엘리먼트의 주소값을 활용해야 하는 경우
- focus
- text selection
- media playback
- 애니메이션 적용
- d3.js, greensock 등 DOM 기반 라이브러리 활용
이렇게 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생한다.
이럴때 useRef라는 hook함수를 활용
const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
<div>
<input ref={주소값을_담는_그릇} type="text" />
{/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
{/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
{/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
</div>);- 이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않음.
- 위에서 제시된 상황 제외한 대부분의 경우 기본 React 문법을 벗어나 useRef 를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 함!
JANG EUN JI | 장은지