[DAY-49] React (2)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
스토리보드 정말 정말 정말 너무 맘에 들어요
컴포넌트를 시각적인 요소로 바로 확인할 수 있다니..
이걸 왜 이제 알았을까요?

스토리보드는 따로 정리했습니다.

[1] 컴포넌트 스타일링

리엑트 컴포넌트에 스타일을 적용하는 방법에는 3가지가 있습니다.

1. 스타일 시트 이용
2. Inline style 적용
3. CSS in JS

[1-1] 스타일 시트 이용

import "./Box.css"; // 해당 방식으로 불러와서 적용할 수 있습니다.

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

export default Box;

[1-2] Inline Style 적용

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

export default Box;

[1-3] CSS in JS

해당 방법은 emotion 라이브러리를 사용할 수 있습니다.

npm install --save @emotion/react
npm install --save @emotion/styled

// ---> 두 방식이 다릅니다. 사용에 따라 설치할 수 있습니다.

npm install --save @emotion/babel-plugin

emotion 라이브러리는 CSS를 JS의 형태로 작성할 수 있게 해줍니다.

/** @jsxImportSource @emotion/react */ // 프래그마를 붙여줍니다.
import "./App.css";
import Box from "./components/Box";
import { css } from "@emotion/react";

const style = css`
  color: hotpink;
`;

const SomeComponent = ({ children }) => (
  <div css={style}>Some Hotpink text! {children}</div>
);

function App() {
  return (
    <div>
      <SomeComponent />
      <Box />
    </div>
  );
}

export default App;

create-react-app에서는 프래그마를 붙여주는 대신 .babelrc 파일을 만들어도 적용이 되지 않습니다.

따라서 특별한 방법을 사용해야 합니다.

그 중 하나의 방법으로 craco 라이브러리를 사용할 수 있습니다.

craco는 create-react-app-config-override를 줄인 말이라고 합니다.

npm install --save @craco/craco
npm install --save @emotion/babel-preset-css-prop

• craco.config.js

module.exports = {
  babel: {
    presets: ["@emotion/babel-preset-css-prop"],
  },
};

• package.json

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
},

다시 npm start 명령어로 실행하면 스타일이 잘 적용되는 것을 확인할 수 있습니다.

[2] useMemo 훅

useMemo는 최적화를 위한 훅입니다.

리엑트 컴포넌트를 구현할 때 함수로 구현합니다.

따라서 해당 컴포넌트가 랜더링 된다는 것은, 누군가가 해당 함수를 호출해서 실행시킨다는 의미와 동일합니다.

그렇다면 해당 함수는 언제 다시 리렌더링 될까요?

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

이러한 리렌더링 작업 시 함수 내부 연산 속도가 느린 컴포넌트라면 꽤 많은 성능을 소비하게 됩니다.

따라서 useMemo 훅을 사용해서 최적화를 진행할 수 있습니다.

const result = useMemo(() => sum(n), [n]);
// n의 값이 변경되었을 때만 sum 함수를 호출해서 연산을 진행합니다.

[3] React.memo

부모 컴포넌트의 상태가 변경될 때 리렌더링이 되는 것을 막기 위해 React.memo 함수를 사용할 수 있습니다.

import React from "react";
import "./Box.css";

// 단순히 React.memo로 감싸만 줘도 리렌더링을 막을 수 있습니다!
const Box = React.memo(() => {
  console.log("Render Box!");
  return <div className="box"></div>;
});

export default Box;

[4] useCallback 훅

함수가 다시 정의되는 것을 막기 위해 useCallback 훅을 사용할 수 있습니다.

React.memo를 사용해서 정의한 Checkbox 컴포넌트를 여러개 사용해보겠습니다.

// App.js
function App() {
  const [foodOn, setFoodOn] = useState(false);
  const [clothesOn, setclothesOn] = useState(false);
  const [shelterOn, setShelterOn] = useState(false);

  const foodChange = (e) => setFoodOn(e.target.checked);
  const clothesChange = (e) => setclothesOn(e.target.checked);
  const shelterChange = (e) => setShelterOn(e.target.checked);

  return (
    <div>
      <Checkbox label="Food" on={foodOn} onChange={foodChange} />
      <Checkbox label="Clothes" on={clothesOn} onChange={clothesChange} />
      <Checkbox label="Shelter" on={shelterOn} onChange={shelterChange} />
    </div>
  );
}

food Checkbox의 값이 변해도 다른 체크박스까지 모두 재정의되는 것을 확인할 수 있습니다.

따라서 이럴 때 useCallback으로 함수를 감싸줍니다.

const foodChange = useCallback((e) => setFoodOn(e.target.checked), []);
const clothesChange = useCallback((e) => setclothesOn(e.target.checked), []);
const shelterChange = useCallback((e) => setShelterOn(e.target.checked), []);
// useMemo와 동일하게 두번째 파라미터로 지켜보고 있다가
// 해당 값이 변경될 때만 함수 재할당을 허용할 수 있습니다.

[5] 사용자 정의 훅

기존 훅들을 조합해서 사용자 정의 훅으로 빼서 사용할 수 있습니다.

이는 중복 코드를 제거할 수 있다는 장점이 있습니다.

사용자 정의 훅은 hooks 디렉토리 내부에 정의합니다.

// useToggle.js
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;

// App.js Component
// ...
const [on, toggle] = useToggle(); // state -> on

return (
  <div>
    <button onClick={toggle}>{on ? "True" : "False"}</button>
  </div>
);

[6] 로그인, 회원가입 폼

storybook으로 실습을 진행했습니다.

하나씩 늘어나는 컴포넌트를 볼 때 마다 편안해지네요.. 😊

---

출처

프로그래머스

React.js Document

storybook Document