컴포넌트 스타일링 ~ Storybook

컴포넌트 스타일링

• stylesheet

• inline style

• CSS in js

stylesheet

1. components에 Box 컴포넌트 생성 후 index.js와 Box.css 파일 생성.

2. index.js에 className을 사용, css 파일 import.

3. Box.css에 className으로 정의된 선택자로 스타일 작성.

4. App.js에 Box 컴포넌트 생성.

Inline style

function APP() {
	return (
		<div>
			<Box bgColor="red" />
		</div>
	)
}

CSS in JS

• JS로 만든 style 코드를 CSS로 만드는 것.

• emotion이란 라이브러리 사용.
• emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해줌.
• npm install --save @emotion/react
• npm install --save @emotion/styled
• npm install --save-dev @emotion/babel-plugin
• npm install @craco/craco --save
• npm add @emotion/babel-preset-css-prop

• package.json에 scripts 부분, react-app을 craco로 대체.
craco는 Create React App Configuration Override의 준말로 eject를 사용하지 않고, cra를 커스텀마이징할 수 있게 해줌.

• craco.config.js에 다음과 같이 작성.

module.exports = {
  babel: {
    presets: ["@emotion/babel-preset-css-prop"],
  },
};

• Styled-Component 자동완성 플러그인 : vscode-styled-components

useMemo

• 최적화를 위한 훅.

• 컴포넌트를 구현하기 위해 함수로 구현을 하는데, 함수 컴포넌트는 jsx를 반환하는 함수에 불과함. 이 컴포넌트를 렌더링된다는 건 누군가 해당 함수 컴포넌트를 호출하는 것을 말함.

• 따라서 함수가 실행될 때마다 내부에 선언된 변수, 함수가 매번 다시 선언, 실행됨을 의미함.

• 함수 컴포넌트가 리렌더링될 때.
• 자신의 상태가 변경될 때.
• 부모 컴포넌트로부터 받는 prop이 변경될 때.
• 부모 컴포넌트의 상태가 변경될 때.

• 만약 연산의 속도가 느린 컴포넌트라면 많은 성능을 소모함.

• 이때 반복된 연산을 방지하기 위해 useMemo를 사용.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

React.memo

• 리렌더링 조건 중 부모 컴포넌트가 변경되지 않았을 때 다시 변경되는 것을 막을 수 있음(자식 컴포넌의 최적화).

• react를 import 하여 함수 컴포넌트를 감싸면 됨.

useCallback

Custom Hook

• 사용자 정의 훅은 기존 훅을 조합해서 만듦.

• 자주 사용하는 상태 로직을 별도 사용자 정의 훅으로 빼서 사용하면 코드 중복을 막고 편리하게 사용할 수 있음.

Storybook

• UI 컴포넌트를 모아 문서화하고 보여주는 오픈소스 툴.

• 개발자는 컴포넌트를 스토리북에 등록시키면 어떤 컴포넌트가 있는지 쉽게 확인할 수 있음.

• npx -p @storybook/cli sb init 명령어로 설치.

• 컴포넌트 개발 완료 후 stories 폴더 안에 해당 컴포넌트 파일 생성 후 템플릿 작성. 컴포넌트에 따른 코드 문서화도 용이함.