시작

최근 포켓몬 API를 활용해 공부할겸 포켓몬 도감을 작업하고 있다.
포켓몬 데이터가 방대하기도 해서 성능 최적화에 신경쓰게 되었다.

컴포넌트 분리하기

초반에는 하나의 파일에 여러 컴포넌트들이 묶여 있다.
그러다 보니 하나의 컴포넌트의 상태가 변경 될 때 마다 리렌더링하는 문제가 발생하게 되었다.

컴포넌트 state가 변경되면 리렌더링 된다.

• state, props의 값이 변경 될 때
• 새로운 상태 값이 추가 될 때

즉, 하나의 파일에 여러 컴포넌트가 같이 있다면 불필요한 렌더링이 발생할 수 있다는 뜻이다.

예를 들어 검색 컴포넌트에 돋보기 아이콘, 검색창, 필터 버튼이 같이 존재한다.

const SearchBox = () => {
  return (
    <SearchContainer>
      <SearchWrap>
        <IcSearch>
          <Search width="35" height="35" />
        </IcSearch>
        <label htmlFor="search">
          <SearchInput
            type="text"
            name="search"
            placeholder="키워드를 입력해 주세요."
          />
        </label>
      </SearchWrap>
      <FilterWrap>
        <FilterBtn />
      </FilterWrap>
    </SearchContainer>
  );
};

검색창에 onChange 이벤트를 추가해 값을 저장하려고 한다.

컴포넌트 분할 전

onChange 이벤트를 추가하고 input의 값을 keyWoerd라는 상태에 저장했다.

const SearchBox = () => {
  const [keyWord, setKeyWord] = useState('');

  const onChangeKeyWord = (e) => {
    setKeyWord(e.target.value);
  };

  return (
    <SearchContainer>
      <SearchWrap>
        <IcSearch>
          <Search width="35" height="35" />
        </IcSearch>
        <label htmlFor="search">
          <SearchInput
            type="text"
            name="search"
            value={keyWord}
            onChange={onChangeKeyWord}
            placeholder="키워드를 입력해 주세요."
          />
        </label>
      </SearchWrap>
      <FilterWrap>
        <FilterBtn />
      </FilterWrap>
    </SearchContainer>
  );
};

하나의 컴포넌트에 여러 컴포넌트가 묶인 상태에서 검색창을 사용해 봤다.

이미지를 보면 검색창의 상태가 변경 될 때 마다
사용하지 않는 돋보기 아이콘, 필터 버튼도 같이 리렌더링 되는걸 볼 수 있다.

이러한 문제로 컴포넌트 분할이 중요하다 생각한다.

컴포넌트 분할하기

const SearchBox = () => {
  return (
    <SearchContainer>
      <SearchWrap>
        <IcSearch>
          <Search width="35" height="35" />
        </IcSearch>
        <SearchInput />
      </SearchWrap>
      <FilterWrap>
        <FilterBtn />
      </FilterWrap>
    </SearchContainer>
  );
};

SearchInput으로 검색창을 하나의 컴포넌트로 만들고 import해 불러 왔다. 그러고 다시 검색창에 입력할 경우

상태가 변경되는 검색창에만 영향을 받는다.

마치며

급할 땐 하나의 컴포넌트에 여러 기능을 넣어 작업하고
다음에 리팩토링해야지 하는식으로 진행하는 경우가 많았다.

개발자 모드로 렌더링 상황을 확인하니
작업을 하면서 컴포넌트 분할하는게 좋을 것 같다는 생각을 했다.

이번 시간을 통해 불필요한 렌더링을 맏을 수 있었다.