React

컴포넌트 스타일링

스타일 적용하는 법

1. 스타일시트 이용

2. Inline style을 적용

3. CSS in JS

Emotion

• 스타일이 적용된 컴포넌트를 코드단에서 생성 가능

• 별도의 css파일 없이 클래스 적용 가능

• npm install --save @emotion/react

• npm install --save @emotion/styled

• npm install --save-dev @emotion/babel-plugin

Craco

• Create React App Configuration Override

• npm install -D @craco/craco --save

• package.json에서 script의 eject삭제 react-scripts를 craco로 수정

Rerendering

• 컴포넌트가 리랜더링되는 조건 3가지

1. 함수 컴포넌트는 자신의 상태가 변경될 때
2. 부모 컴포넌트로 부터 받는 prop이 변경될 때
3. 부모 컴포넌트의 상태가 변경될 때

useMemo

• 최적화를 위해 필요한 Hook

• import { useMemo } from "react"

• useMemo(( ) => 기록해 둘 표현식, 어떤 상태가 변경되었을 때 실행할지)

• ex) useMemo(() => sum(n), [n])

React.memo

• 부모 컴포넌트의 상태만 변경되고 자식 컴포넌트는 변경되지 않으면 리렌더링되지 않도록

• import React from "react"

• React.memo(() => { })

useCallback

• 다시 렌더링 되는 것을 막아줌
• useMemo, React.memo, useCallback를 이용해서 최적화된 컴포넌트 만들 수 있다.

Custom Hook

• 사용자 정의 훅

Storybook

• .stroybook 디렉터리는 설정파일 들어있고
• stories 디렉터리는 등록된 스토리들이 모여있다.
• npm run storybook 실행