프로그래머스 데브코스 TIL - Day 49

 

✅ 오늘의 학습

📌 React (2)

 

- 컴포넌트 스타일링 / emotion

- useMemo, useCallback

- React.memo

- Custom Hooks

- Storybook

 

 

---

emotion

: CSS in JS의 종류중 하나이며 프레임워크에 구애받지 않고 사용하는 방식과 React에서 사용하는 방식이 있다.

React에서 사용할 것이기 때문에 React방식으로만 적을 예정이다.

 

emotion 공식 문서

 

기본 사용 방법에는 CSS 함수를 사용하여 작성하는 방법과 styled component방식으로 작성하는 방법이 있다.

 

CSS 함수 방식

import { css } from "@emotion/react";

const style = css`
  color: pink;
`;

const SomeComponent = ({ children }) => (
  <div css={style}>Welcome {children}</div>
);

function App() {
  return (
    <div className="App">
      <SomeComponent />
      <div css ={{ width: 200 }}> // 이런 식으로도 적용 가능
    </div>
  );
}

export default App;

 

styled component 방식

[Box.js]

import styled from "@emotion/styled";

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: cyan;
`;

export default Box;

 

emotion 적용해보기

/** @jsxImportSource @emotion/react */

일단 emotion을 사용하려면 상단에 위와 같은 pragma를 작성해주어야 하는데,

매번 작성하기가 불편하니 babelrc을 설정해야 한다.

** 희소식!! emotion 버전 8 이상에서는 babel-plugin이 필요하지 않다고 한다.

== 즉 그냥 설치만 해서 사용하면 됨

 

하지만 CRA환경에서는 babelrc을 설정할 수 없기 때문에

babel설정을 오버라이딩 해줄 craco 라이브러리를 설치한다.

 

 

 

렌더링 최적화

 

🤔 리렌더링 조건

1. 자신의 상태가 변경될 때

2. 부모의 상태가 변경되면 리렌더링됨

3. 부모컴포넌트로 받는 prop이 변경될 때

 

useMemo()

중복적인 연산을 막아준다. 연산된 값을 메모제이션 해주는 것.

 

 

연산에 필요한 값은 변경이 되지 않았는데 위의 리렌더링 조건에 부합되어서

불필요하게 리렌더링되면서 같은 연산을 반복적으로 하는 것을 막아줄 때 사용한다.

 

const result = useMemo(() => sum(n), [n]);

첫 번째 인자에 값을 리턴하는 함수와 해당 함수에 의존성을 가진 값을 적어주면 된다.

 

 

React.memo()

부모 컴포넌트의 상태가 변경되어 리렌더링 되었을 때 자식컴포넌트도 리렌더링이 되는데

자식컴포넌트가 부모컴포넌트로 의존하는 데이터가 없을 경우

즉, 부모 컴포넌트의 리렌더링이 자식컴포넌트와 관계가 없을 경우

React.memo를 통해 자식 컴포넌트의 리렌더링을 막을 수 있다.

 

const Box = React.memo(() => {
  return (
    //...
  )
});
export default Box;

 

내보내기 부분에서 React.memo로 감싸서 처리할 수도 있다.

export default React.memo(Box);

 

useCallback()

중복적인 함수 생성을 막아준다. 함수 자체를 메모제이션 해주는 것.

함수형 컴포넌트에서는 리렌더 시에 안에 포함되어 있던 함수들이 전부 새로운 함수로 다시 생성되기 때문에

다시 생성된 함수가 새로운 props로 인식되어 리렌더링이 발생한다.

 

이 것도 react.memo와 같이 부모 컴포넌트의 리렌더링이 자식컴포넌트에게 전달한 함수와

데이터 의존 관계가 없을 경우 useCallback를 통해 자식 컴포넌트의 리렌더링을 막을 수 있다.

 

 

Custom Hooks

컴포넌트를 만들다보면 반복되는 로직이 발생하는데 Custom Hooks를 만들어서

작성한 로직들을 쉽게 재사용 할 수 있다.

 

강의를 보며 간단하게 useToggle, useHover, useKeyPress를 만들어 보았다.

이전에도 커스텀 Hooks를 만들어서 사용해본 적은 있었는데, 잘 활용하지는 못했던 듯 하다.

 

검색해보며 찾은 남이 만든 Hooks

학습을 위해 직접 만들어 보는 것이 좋겠지만! 남이 만든 코드들을 통해

다양하게 활용할 수 있다는 것을 알게 되었다.

 

 

useForm

input 값을 변경하는 change와 form의 submit함수를 담고

해당 함수들을 통해 value, error, loading을 관리를 하는 useForm Hook을 강의를 따라하며 만들어보았다.

import { useState } from "react";

const useForm = ({ initialValues, onSubmit, validate }) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    console.log(name, value);
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = async (e) => {
    setIsLoading(true);
    e.preventDefault();
    const newErrors = validate(values);
    if (Object.keys(newErrors).length === 0) {
      await onSubmit();
    }
    setErrors(newErrors);
    setIsLoading(false);
  };
  
  return {
    values,
    errors,
    isLoading,
    handleChange,
    handleSubmit,
  };
};

export default useForm;

 

validate까지 인자로 받아서 결과를 처리하는 부분을 보고 엄청 효율적인 코드라고 느꼈다.

이전에 커스텀 훅을 만들었을 때는 단순하게 구현했었는데 이런식으로 확장해서 작성할수도 있구나 하는

깨달음을 얻게 되었다. 👍

 

 

---

✍ 느낀 점

개인적으로 css를 작성하는 파일을 따로 만들어서 스타일링하는 방식이 좀 더 익숙했었고,

이전에도 styledComponent를 사용할 때 무언가 이질감이 느껴졌었는데

이번 실습들을 해보면서 CSS in JS 스타일에 조금은? 적응된 듯 하다.

컴포넌트들을 아주 작은 단위로 조각내서 사용하기에는 CSS파일을 따로 만드는 것 보다는

컴포넌트 내부에서 CSS를 작성하는 방식이 덜 번거롭다고 느꼈다.

그리고 이전에 해보지 못했던 방식인 Storybook을 사용해보면서 지금 당장 적용하기엔

프로젝트 규모상 적합할 지는 의문이 들었지만 그래도 잘 활용한다면 좋을 것 같다는 생각을 했다.