[React] React(2)

❗❗  데브코스 51일차 (10.11)

React 강의가 짧은 대신에 많은 내용은 포함하고 있다.
그래서 파트별로 끊어서 블로그를 포스팅할 예정이다.

✅ emotion

emotion은 CSS in JS의 형식으로 styled 스타일이 첨부된 React 구성 요소를 만드는 방법이다.
즉 JavaScript 안에서 CSS를 가능하게 해준다.

• emotion 설치 - yarn add @emotion/react
• babel plugin 설치 - yarn add --dev @emotion/babel-plugin​
• styled 설치 - yarn add @emotion/styled

//최상단에 해당 구문 추가 후 사용
/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react'

위의 import 방식이 귀찮다면. babelrc 설정 파일에서 다음과 같은 구문을 추가해 주면 된다.

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

하지만 create-react-app으로 설치된 패키지는 .bablerc 파일이 숨겨져 있기 때문에 craco를 이용해 설정 파일을 제어할 수 있다. 이 부분이 필요하다면 구글링...

 

1. css 사용법

/** @jsxImportSource @emotion/react */
import { css, jsx } from '@emotion/react'

const divStyle = css`
  background-color: red;
  font-size: 24px;
  &:hover {
    color: white;
  }
`

export default function App() {
  return <div css={divStyle}>Test</div>
}

2. styled 사용법

import styled from 'styled-components'

const DivStyle = styled.div`
  background-color: red;
  &:hover {
    color: white;
  }
`

export default function App() {
  return <DivStyle>Test</DivStyle>
}

 

✅ useMemo

성능 최적화를 위하여 연산된 값을 재사용하는 Hook으로 값을 반환한다.

 

함수가 리렌더링 되는 조건은 크게 다음과 같다.

1. 함수 컴포넌트는 자신의 상태가 변결될 때 리렌더링 된다.
2. 부모 컴포넌트로 부터 받은 prop이 변경될 때 리렌더링 된다.
3. 부모 컴포넌트의 상태가 변경되면 리렌더링 된다.

1번과 2번은 그렇다 하더라도 자식의 상태와 전혀 관련이 없는 부모의 상태가 변경될 때 자식이 리렌더링 되는 것은 매우 불필요한 렌더링이다.

 

그럴 때 useMemo를 사용함으로써, 불필요한 리렌더링을 줄이면서 성능 최적화를 진행하게 된다.

const doubleCount = React.useMemo(() => count * 2, [count])

 

✅ React.Memo

위 useMemo에서 부모 컴포넌트의 상태가 변경될 때 하위 컴포넌트의 함수가 리렌더링 되는 현상을 막기 위해 useMemo를 사용했다. 함수가 아닌 컴포넌트 자체의 렌더링을 막을 때는 어떻게 할까?

바로 React.Memo를 사용하면 부모 컴포넌트의 상태가 변경되더라도 하위 컴포넌트는 리렌더링을 막을 수 있다.

 

사용법은 간단하다. 컴포넌트 자체를 React.Memo로 감싸주면 된다.

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);

 

✅ useCallback

useCallback은 useMemo와 같이 성능 최적화에 사용된다.

useMemo가 값을 반환한다면, useCallback은 함수를 반환한다.

즉, 함수가 다시 정의되는 것을 막기 위해 사용된다. 

const handleClick = React.useCallback(
  () => console.log('current count :' + count),
[의존성 인자])

//의존성 인자가 없다면 처음에 함수가 정의된 상태에서 계속 재활용된다.

위의 세 가지 최적화를 위한 hook을 적절히 사용하면 컴포넌트 렌더링 최적화에 큰 도움이 된다.

하지만 무분별하게 사용할 경우 메모리와, 코드가 추가로 필요하게 되므로 적절하게 조합해서 사용해야 한다.

 

✅ Custom Hook

사용자 정의 Hook은 기존 Hook을 조합해서 사용할 수 있다.

자주 사용하는 상태 로직을 별도 사용자 정의 Hook으로 빼서 사용하면 중복 코드를 많이 제거할 수 있고, 편하게 사용할 수 있다.

//부모 컴포넌트
import useToggle from "./hooks/husToggle";

function App() {
  const [on, toggle] = useToggle();
  
  return (
    <div>
      <button onClick={toggle}>{on ? 'true' : 'false'}</button>
    </div>
  }
}

//useToggle 클릭 시 체크박스 true, false 변환해주는 CustomHook
import {useCallback, useState} from "react";

const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);
  const toggle = useCallback(() => setState((state) => !state), []);
  
  return [state, toggle];
};

export default useToggle;

위 코드의 예시는 button 클릭 시 true, false로 토글이 되면서 텍스트가 보이는 예시이다.

반환될 상태값과, 함수를 리턴해주고 사용하는 곳에서 적절하게 사용하면 된다.

만약 여러 컴포넌트에서 토글이 사용된다면, 위와 같이 사용자 정의 Hook을 만들어서 사용하면 재사용성을 높일 수 있다.

 

👨‍💻 react를 학습할 때, 알아야 할 것이 너무 많아서 Hook에 관련된 것들은 계속 학습을 미뤘었다.

그래서 매번 CRUD 위주로 개발만 진행했고, 최적화에 대해 고민해 본 적이 없었다. 하지만 이번 기회를 통해

최적화 Hook에 대해 알 수 있었고, 어느 때에 적절히 사용하면 되는지 깊게 파악할 수 있었다.

그 외에 StoryBook을 이용한 컴포넌트 UI 관리에 대해서 학습할 수 있었다.

 

📖 학습한 내용

• React(2)
  
  • 컴포넌트 스타일링
  • useMemo
  • React.memo
  • useCallback
  • Custom Hook
  • StoryBook
  • Form

📃 참고 사이트

https://react.vlpt.us/basic/16-useEffect.html

 

https://velog.io/@ashnamuh/React%EC%9D%98-useReducer-useCallback-useMemo-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0