React (2)
컴포넌트 스타일링
- 스타일 시트를 이용 / 인라인 스타일 이용 / CSS in JS(emotion 라이브러리) 이용
- emotion
npm i @emotion/react/yarn add @emotion/react
npm i -D @emotion/babel-plugin/yarn add --dev @emotion/babel-plugin
mpm i @emotion/styled/yarn add @emotion/styled - craco(create-react-app-config-override) 라이브러리를 사용하여 emotion 을 관리 할 수 있다.
craco.config.js에서의module.exports를 통해 babel 설정을 override 할 수 있음
useMemo
- 최적화를 위한 훅
왜 최적화가 필요한가?
- 우리는 컴포넌트를 JSX를 반환하는 함수로 구현하고 있음. 이 컴포넌트가 렌더링 된다는 것은 누군가 이 함수 컴포넌트를 호출해서 실행한다는 것을 의미한다.
이 함수가 실행될 때 마다 내부에 선언되어있던 변수, 함수등이 매번 다시 선언되거나 다시 실행되는 것을 의미 (리렌더링) - 리렌더링은 컴포넌트가 자신의 상태를 변경하거나, 부모 컴포넌트로부터 받는 Prop 이 변경되었을 때 일어난다.
또, 부모 컴포넌트가 변경되기만 해도 최적화하지 않으면 다시 리렌더링이 됨 - 즉, 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다.
부모 컴포넌트로부터 받은 Prop 이 변경될 때 리렌더링된다.
부모 컴포넌트의 상태가 변경되면 리렌더링 된다. - 부모컴포넌트의 상태가 변경될 때마다 리렌더링 된다면 좋지 않을 것임
이러한 최적화에 사용되는 것이 useMemo const result = useMemo(() => 기록해 둘 표현식(ex. sum(n)), [상태변경을 감지할 값(ex. n)])... 즉 sum(n) 에서 n 이 변경되었을 때만 리렌더링을 함
React.memo
- 부모 컴포넌트의 상태가 변경될 때 리렌더링 되는 문제를 해결하기 위해 사용한다.
자식 컴포넌트가 변경되지 않았을 때는 리렌더링을 하지 않음 - 자식 컴포넌트에
const Item = React.memo(() => { //... })와 같이 사용한다.
useCallback
- 컴포넌트가 렌더링 된다는 것은 함수가 호출된다는 것 ... 함수가 호출되면 다시 연산할 뿐만 아니라 함수도 다시 정의됨
- 재연산을 막기 위해 useMemo 를 사용한다면, 함수가 다시 정의되는 것을 막기 위해 useCallback 을 사용한다.
const Item = useCallback((e) => { //... }, [dependency])와 같이 사용한다.
Custom Hook
- 사용자 정의 훅 ... 기존 훅을 조합하여 사용할 수 있음
- 자주 사용될 수 있는 상태 로직을 별도의 커스텀 훅으로 사용한다면 중복 코드 제거와 사용이 용이해짐
Storybook
- 컴포넌트를 모아서 문서화하고, 보여주는 오픈소스 툴
컴포넌트를 스토리북에 등록시켜 놓으면 어떤 컴포넌트가 있는지 쉽게 파악할 수 있다. - create-react-app 을 통해
npx -p @storybook/cli sb init으로 설치 - .storybook ... 설정 파일들이 모여 있는 디렉토리
- src/srories ... 등록된 스토리들이 모여 있는 디렉토리
- action 을 통해 어떤 이벤트가 발생하는지에 대한 문서화도 가능하다.
- 스토리북 기반의 개발을 하게되면 실제 프로젝트에 컴포넌트를 넣으면서 테스트 하지 않아도 되기 때문에 편하게 사용할 수 있다.
Form
- 사용자 입력과 관련된 요소를 입력 / 제출
예시) 로그인 폼
- 이름, 패스워드 등을 입력받을 수 있게,
입력에 따른 validation 을 체크,
submit 처리 (페이지 이동을 막을 때는 preventDefault 등을 처리)
등을 고려해야 한다. - 로그인폼의 상태를 통해 submit 을 할 수 있게끔 관리한다.
커스텀 훅을 통해 정의하면 필요한 곳마다 만들 필요 없이 재활용이 가능하다.
value, error, isLoading 과 같은 state 를 관리
회고
훅이 정확히 어떤 의미인지 파악을 해야할 것 같다.
use 키워드의 훅들이 아직 어떤 상황에서 쓰여야하는지 잘 모르겠다.. 커스텀 훅부터 조금 어려움이 느껴져서 이 부분부터 복습을 여러번 해봐야 할 것 같다.
멘토링시간에 현업에서 스토리북을 활용하는 것을 잠깐 본 적이 있는데, 스토리북을 다시 한번 접하게 되면서 현업, 또는 프로젝트를 구성할 때 크게 유용한 방법으로 사용할 수 있을 것 같다.
프론트엔드