프로덕션 빌드

MiniCssExtractPlugin을 이용하여 CSS 코드가 포함된 JS 파일 별로 CSS 파일을 생성

TerserPlugin을 이용하여 번들 크기를 줄입니다.

자식 컴포넌트의 props로 객체를 넘겨줄 경우 변형하지 말고 넘기기

나쁜예

// UserList.jsx  
function UserList() {
{...}

 const getResult = useCallback((score) => {
    if (score <= 70) {
      return { grade: "D" };
    } else if (score <= 80) {
      return { grade: "C" };
    } else if (score <= 90) {
      return { grade: "B" };
    } else {
      return { grade: "A" };
    }
  }, []);

return(
 <div>
 {users.map((user) => {
    return (
      <Item key={user.id} user={user} result={getResult(user.score)} />
        );
      })}
 </div> 
  
)
export default memo(UserList);

// Item.jsx  
function Item({ user, result }) {
  console.log("Item component render");

  return (
    <div className="item">
      <div>이름: {user.name}</div>
      <div>나이: {user.age}</div>
      <div>점수: {user.score}</div>
      <div>등급: {result.grade}</div>
    </div>
  );
}

export default Item;

좋은예

// UserList.jsx  
function UserList() {
{...}

return(
 <div>
 {users.map((user) => {
    return (
      <Item key={user.id} user={user} />
        );
      })}
 </div> 
  
)
export default memo(UserList);

// Item.jsx  

function Item({ user }) {
  console.log("Item component render");

  const getResult = useCallback((score) => {
    if (score <= 70) {
      return { grade: "D" };
    }
    if (score <= 80) {
      return { grade: "C" };
    }
    if (score <= 90) {
      return { grade: "B" };
    } else {
      return { grade: "A" };
    }
  }, []);

  const { grade } = getResult(user.score);

  return (
    <div className="item">
      <div>이름: {user.name}</div>
      <div>나이: {user.age}</div>
      <div>점수: {user.score}</div>
      <div>등급: {grade}</div>
    </div>
  );
}

상태를 넘겨서 하위 컴포넌트에서 처리

변경이 잦은 key 사용 지양

다음과 같은 경우 key값이 바뀌기 때문에 바뀌었다고 판단하여 리렌더링이 자주 발생하합니다.

1. index를 사용하는경우 추가 제거시 key값이 바뀌게 됩니다.
2. uuid와 같은 매번 바뀌는 key값을 주는 경우

가상화된 List

거대한 list data를 렌더링 한다면 브라우저의 뷰포트에 보여지는 부분만 렌더링하고 나머지는 스크롤 할때 보여지도록 합니다.

windowing이라고 이것을 부르고 react-window, reat-vitualized 라이브러리로 가능합니다.