오늘의 나는 무엇을 새롭게 배웠나요?

[1] React.memo

---

React는 고차 컴퍼넌트(Higher Order Component, HOC) React.memo()를 제공한다. 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다.

const App = () => {
	return (
		<div>안녕하세요</div>
		<div>안녕히계세요</div>
	)
}

export default React.memo(App) // 컴포넌트를 작성 후 아래에 React.memo를 사용한다.

고차 컴포넌트 Higher Order Component, HOC

---

• 고차 컴포넌트는 컴포넌트를 매개변수로 받아 새로운 컴포넌트를 반환하는 함수
• 고차 컴포넌트는 with컴포넌트로 명명한다.
• App.jsx

import './App.css';
import User from './components/User';
import withCurrent from './components/withCurrent';

const CurrentUser = withCurrent(User); // withCurrent 컴포넌트에 User 컴포넌트를 매겨변수로
																			 // 사용함
function App() {
  return (
    <div>
      <CurrentUser userName="uey" />
    </div>
  );
}

export default App;

• withCurrent.jsx

import React, { useEffect, useState } from 'react';

function withCurrent(Component) { // user 컴포넌트
  const NewComponent = ({ userName, props }) => {
    const [user, setUser] = useState('');

    useEffect(() => {
      let timer = setTimeout(() => {
        setUser(userName);

        clearTimeout(timer);
      }, 1000);
    });

    if (!user) return 'Loading';

    return <Component {...props} user={user} />; // user 컴포넌트 사용
  };

  return NewComponent;
}

export default withCurrent;

• User.jsx

import React from 'react';

function User({ user }) { // withCurrent로부터온 props
  return (
    <div>
      <strong>{user}</strong>
    </div>
  );
}

export default User;

React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다.

다음 렌더링 결과와 이전 결과의 비교는 빠르다. 하지만 어떤 상황에서는 이 과정의 속도를 좀 더 높일 수 있다.

컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

props 동등 비교 커스텀 마이징

---

React.memo()는 props 혹은 props 객체를 비교할 때 얕은 비교를 한다. ← depth 1만 판단

비교 방식을 수정하고 싶다면 두 번째 매개변수로 비교함수를 만들어 넘겨주면 된다.
React.memo(Component, [areEqual(prevProps, nextProps)]);

function moviePropsAreEqual(prevData, nextData) {
  return (
    prevData.title === nextData.title &&
    prevData.releaseDate === nextData.releaseDate
  );
}

const MemoizedMovie2 = React.memo(Movie, moviePropsAreEqual);

• moviePropsAreEqual() 함수는 이전 props와 현재 props가 같다면 true를 반환할 것이다.
  true를 반환하면 이전에 메모이징 된 내용을 재사용한다.

React.memo() 사용해야하는 경우

---

• React.memo()를 사용하기 가장 좋은 케이스는 함수형 컴퍼넌트가 같은 props로 자주 렌더링 될거라 예상될 때이다.
• 컴포넌트가 같은 props로 자주 렌더링되거나, 무겁고 비용이 큰 연산이 있는 경우, React.memo()로 컴퍼넌트를 래핑할 필요가 있다.
• React.memo() 사용할 때는 useCallback, useMemo를 사용하여 최적화를 진행해야한다.
  부모로부터 props를 통해 받아온 함수는 매 렌더링마다 새 함수가 선언되기 때문에 React.memo를 사용하더라도 리액트가 불필요한 연산을 수행한다. 이때 useCallback을 이용하면 같은 함수임을 보장하여React.memo를 적용할 수 있다.
• useMemo 함수형 컴포넌트 내부에서 연산 결과를 캐싱하기 위해 사용됩니다. 이는 해당 함수를 호출하고 계산한 값을 재사용하는 것으로, 렌더링 결과를 빠르게 반환할 수 있습니다. useMemo는 주로 계산이 비용이 많이 드는 경우에 사용됩니다.
  

react.memo()를 사용하지 않는 경우

---

• props가 자주 변하는 컴포넌트의 경우 React.memo()로 매핑할지라도 2가지 과정을 수행한다.

1. 이전 props와 다음 props의 동등 비교를 위해 비교 함수를 수행한다.
2. 비교 함수는 거의 항상 false를 반환할 것이기 때문에, React는 이전 렌더링 내용과 다음 렌더링 내용을 비교할 것이다.
3. 이런 비교과정은 불필요한 연산을 수행하므로 React.memo를 사용하지 않는다.

공부하면서 어떤 어려움이 있었나요?

TO DO List state 관리

너어무.. 힘들었다. state가 많으니까 너무 꼬이고.. 지금은 너무 졸려서 내일 더 상세히 정리할 예정이다.

1. Calendar에 넘겨주는 selectedDate undefined 이슈
2. TodoItem으로 넘겨주기 위해선 props drilling으로 TodoList에도 넘겨줘야함.
3. 모든 데이터의 형식이 처음에 undefined면 그에 대한 예외처리를 해야함.
4. todoList set에 요소를 추가할 때, id가 중복되는 이슈
   • useRef를 사용해서 하려다 보니..

내일의 나는 무엇을 공부해야 할까요?

토니와 불타는 페어프로그래밍.. 제발 끝낼 수 있게 해주세요 엉엉😭😭