S3U3 W10D4
구조적으로 react 코드 작성하기
✅ TIL
-
CDD (Component Driven Development)
Styled-Components -
Storybook 연습
Component Driven Development
: 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 (bottom-up)
부품 컴포넌트 생성 -> 각각의 컴포넌트를 결합 -> 페이지 생성
재사용할 수 있는 UI 컴포넌트를 통해 작업의 효율성을 높인다.
CSS 구조화
프로젝트 작업의 규모가 커져서 팀원의 수가 증가하고,
다양한 디바이스들의 등장으로 CSS가 복잡해짐에 따라
CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었다.
1. CSS 전처리기 (preprocessor) 등장
ex. SASS
CSS를 확장해주는 스크립팅 언어
SCSS 코드를 읽어서 전처리한 다음 CSS로 컴파일한다.
변수, 함수, 상속 개념을 활용하여 재사용이 가능하다.
but 전처리 과정이 필요하고, 컴파일한 CSS 용량이 거대해짐.
2. CSS 방법론 등장
ex. BEM
Block-Element-Modifier로 구분하여 클래스명을 작성하는 방법
CSS 클래스명 작성에 일관된 패턴을 부여한다.
전처리 과정 필요 없이 네이밍으로 CSS 구조화
but 선택자 이름이 길고 복잡해지고, 캡슐화의 개념이 없어진다.
3. CSS-in-JS 등장
ex. styled-Component
컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리
기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공한다.
CSS를 컴포넌트 안으로 캡슐화한다.
but 빠른 페이지 로드에 불리하다.
Styled Components
React에서 CSS를 컴포넌트화 할 수 있는 라이브러리
npm install --save styled-componentsIf you use a package manager like yarn that supports the "resolutions" package.json field, we also highly recommend you add an entry to it as well corresponding to the major version range. This helps avoid an entire class of problems that arise from multiple versions of styled-components being installed in your project. -공식문서
//설치 후 package.json 파일에 아래와 같이 작성 { "resolutions": { "styled-components": "^5" } }
터미널에서 설치 후 React에서 불러와준다.
import styled from "styled-components"Styled Components 문법
Templete Literals 문법 사용
1. 컴포넌트 생성
const 컴포넌트 이름 = styled.태그`속성값` //백틱 안에 속성값 작성
const Title = styled.h1`
font-size: 1.5pt;
color: blue;
text-align: center;
`;
export default function App() {
return <Title>Welcome to young's velog</Title>;
}2. 컴포넌트 확장
const 새 컴포넌트 = styled(재활용할 컴포넌트)`확장할 속성값`
/* Title 컴포넌트 구현 생략*/
const TomatoTitle = styled(Title)`
color: tomato;
`;
export default function App() {
return (
<>
<Title>Welcome to young's velog</Title>;
<TomatoTitle>my title</TomatoTitle>
</>
);
}4. Props 활용
props를 인자로 받는 함수를 만들어 사용한다.
`css속성: ${props => 함수 코드}`
const Button = styled.button`
background: yellow;
color: ${props => props.color || "black"}; //props로 받은 color 또는 black으로 출력
`;
export default function App() {
return (
<>
<Button>Button1</Button>
<Button color="red">Button2</Button> //props 전달
</>
);
}4. 전역 스타일 설정
// createGlobalStyle 함수를 불러온다.
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`
//전역 스타일 컴포넌트는 최상위에서 return한다.
function App() {
return (
<>
<GlobalStyle />
<Button>전역 스타일 버튼</Button>
</>
);
}
Styled Components 예제
* {
margin: 0.5rem;
}
#practice {
padding: 1rem;
font-size: 2rem;
background: powderblue;
border-radius: 1rem;
transition: 0.5s;
}
#practice:hover {
background: cornflowerblue;
color: white;
transition: 0.5s;
}위 CSS 속성을 Style Components로 바꿔보려 한다.
:hover{속성값}은 &:hover{속성값}으로 적용할 수 있다.
import styled, { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
margin: 0.5rem;
`
const Button = styled.button`
padding: 1rem;
font-size: 2rem;
background: powderblue;
border-radius: 1rem;
transition: 0.5s;
&:hover {
background: cornflowerblue;
color: white;
transition: 0.5s;
}
`
export default function App() {
return (
<>
<GlobalStyle/>
<Button id="practice">Practice!</Button>
</>
)
}위와 같이 작성할 수 있다.
Storybook
: UI 개발 도구
컴포넌트들을 문서화하여 관리할 수 있다.
- UI 컴포넌트들을 카탈로그화 한다.
- 컴포넌트 변화를 stories로 저장한다.
- 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공한다.
- 리액트를 포함한 다양한 뷰 레이어를 지원한다.
npx storybook init //Storybook 설치
npm run storybook //Storybook 실행