react.js 사용하기 Ⅱ

young-gue Park·2023년 3월 7일

CSS JavaScript React React.memo storybook useCallback useMemo

React

목록 보기

4/17

⚡ react.js 사용하기 Ⅱ

📌 리액트 컴포넌트에 스타일 적용하는 법

스타일시트를 이용하는 것

💻 Box.css

.box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

💻 Box/index.js

import "./Box.css";

const Box = () => {
    return <div className="box"/>;
};

export default Box;

가로세로 100px 민트색 박스가 출력이 될 것이다.

Inline style을 적용하는 것

💻 Box/index.js

import "./Box.css";

const Box = ( {bgColor} ) => {
    return <div className="box" style={{backgroundColor: bgColor}}/>;
};

export default Box;

💻 App.js

import Box from './components/Box';

function App() {
  return (
    <div className="App">
      <Box bgColor="red"/> // 인라인 스타일로 붉은색 적용
    </div>
  );
}

export default App;

💡 기존의 스타일시트와 충돌하였지만 인라인으로 지정한 스타일이 우선 적용되는 것을 알 수 있다. 이전에도 배운 적이 있다.

CSS in JS
- Emotion

💢 Emotion의 경우 현재 실습 환경에서 설치 단계에서 계속 오류가 발생해 실습을 미뤘지만, 끝끝내 yarn 실행 오류와 함께 해결했다. 조만간 다뤄볼 예정이다.

📌 메모리 최적화하기

⭐ useMemo

🔷 최적화를 위해 필요한 훅

컴포넌트를 구현하기 위해 함수를 사용중인데 이 함수 컴포넌트는 JSX를 반환하는 함수에 불과하다.
렌더링은 누군가가 이 함수 컴포넌트를 호출하여 실행하는 것인데 리렌더링시 내부의 변수나 함수들이 재선언되거나 재실행된다.
❗ 최적화되지 않으면 끊임없이 리렌더링된다.
1. 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다.
2. 부모 컴포넌트로부터 받는 prop이 변경될 때 리렌더링된다.
3. 부모 컴포넌트의 상태가 변경되면 리렌더링된다.
- ❗ 만약 연산의 속도가 느린 컴포넌트라면...? 많은 성능을 소비하게 될 것이다.
- 이를 방지하기 위해 useMemo를 사용한다.

💻 ShowSum.js

import {useMemo} from "react";

function sum(n) {
    console.log('Start')
    let result = 0;
    for(let i = 1; i <= n; i++) {
        result += i;
    }

    console.log('Finished');
    return result;
}

const ShowSum = ({label, n}) => {
    const result = useMemo(() => sum(n), [n]); // n이 변경되었을 때만 연산하도록 useMemo로 지정

    return (
        <span>
            {label}: {result}
        </span>
    )
}

export default ShowSum;

💻 App.js

import {useState} from 'react';
import ShowSum from './components/ShowSum';
import './App.css';

function App() {
  const [label, setLabel] = useState('Result');

  return (
    <div className="App">
      <button onClick={() => setLabel(label + ":")}>Change Label</button>
      <ShowSum label={label} n={1000}></ShowSum> // 1000번 연산
    </div>
  );
}

export default App;

🖨 실행 결과

버튼을 아무리 눌러서 연산을 다시 시도해도 리렌더링이 이루어지지는 않는 모습이다. (로그가 찍히지 않음)

⭐ React.memo

🔷 부모 컴포넌트의 상태가 변경되어도 자식 컴포넌트의 상태가 변경된 것이 아니라면 리렌더링하지 않게 한다.

자식 컴포넌트를 React.memo()안에 넣어 사용

const func = React.memo(({one, two}) => {
    ...
})

⭐ useCallback

🔷 함수가 다시 정의되는 것을 막는다.

💡 함수가 재정의 되면서 새로운 메모리에 들어가면 memo와 상관없이 리렌더링 되는데 이를 막을 수 있다.

선언할 함수의 내용 부분을 useCallback()안에 넣어 사용

const func = useCallback((e) => setFunc(e.target.checked), []);

⭐ 사용자 정의 훅

🔷 기존 훅을 조합하여 사용하는 것

자주 사용될 수 있는 상태 로직을 별도 사용자 정의 훅으로 빼서 사용하면 중복코드를 제거할 수 있고 편리한 사용이 가능하다.

ex) 눌렀을 때의 상태와 이벤트, 마우스를 올렸을 때의 상태와 이벤트 등

📌 Storybook

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

개발자는 컴포넌트를 스토리북에 등록시켜놓으면 어떤 컴포넌트가 있는지 상황별로 쉽게 확인할 수 있다.
storybook을 설치하고 지정된 양식을 따라가기만 하면 쉽게 컴포넌트 등록이 가능하며 상태 변경 커스텀도 가능하다.
- 스토리북 설치 및 튜토리얼

❗ 윈도우 os에서 설치 단계부터 문제에 빠지는 경우가 있다. ~~내가 그랬다.~~ 파워쉘을 관리자 권한으로 실행한 후 간단한 작업을 거쳐서 yarn 명령어가 VSCode에서 돌아갈 수 있게 설정해야한다. 왜냐하면 yarn 명령어 이외의 방법으로 설치나 실행을 하려하면 무조건 오류가 발생하기 때문에 yarn을 사용하지 않던 사람이라도 스토리북을 실행하려면 사용해야만 할 것이다. (윈도우 한정)

components 폴더 내부 컴포넌트와 해당 컴포넌트들을 본딴 stories.js는 필자가 직접 만든 것이고, 그 외에는 기본으로 포함되어있다.
컴포넌트들은 이전에 제작했던 간단한 컴포넌트다. 그러므로 Counter 컴포넌트만 확인한다.

💻 Counter.js

import { useState } from "react";

const Counter = ({onIncrease}) => {
    const [count, setCount] = useState(0);

    const handleIncrease = () => {
        setCount(count+1);
        onIncrease();
    }
    return <div>
        <div>{count}</div>
        <button onClick={handleIncrease}>+</button>
    </div>
}

export default Counter;

💻 Counter.stories.js

import React from 'react';
import Counter from '../components/Counter';

export default {
  title: 'Example/Counter',
  component: Counter,
  argTypes: {onIncrease: {action: "clicked"}}
};

const Template = (args) => <Counter {...args} />;

export const Default = Template.bind({});