[React]

스타일 적용

1. stylesheet .css 작성

2 css 적용 --emotion

3 inline이용 style={}

 

useMemo

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

1. 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링 된다.

2,. 부모 컴포넌트로 부터 prop이 변경될 때 리렌더링된다.

3.  부모 컴포넌트 상태가 변하면 리렌더링된다.

 

만약 연산의 속도가 느린 컴포넌트가 리렌더링 된다면 ?

리렌더링 때문에 다른 느린 컴포넌트도 실행되어 속도가 느려진다. 그래서 usememo를 사용한다.

 

성능이 오래걸리는 값을 usememo에 두어서 한번 더 계산하지 않게 한다.

 

React.memo

조건 3번을 막기위해 

함수컴포넌트를 React.memo로 감싸준다.

 

useCallback

use.memo와 같이 사용된다.

다시 렌더링 되는 것을 막아줌

 

Custom Hook

여러중복 로직을 줄일 수 있다.

 

Storybook 설치하기

npx create-react-app 파일이름
cd 파일이름
npx -p @storybook/cli sb init