<aside> 📢 안부인사차 연락드렸다가 코드 리뷰 및 세팅 관련 피드백을 주셔서 팀원분들께 공유합니다! 전체적인 퀄리티가 괜찮다고 칭찬들었습니다~ 박쑤~ 팀장님이 초기 세팅을 잘해주셔서 좋게 봐주신 거 같아요! 👍👍 이후 업데이트 되는 작업물도 봐주신다고 하셨으니 아래 피드백 참고해서 리팩토링 및 개발진행하면 좋을 거 같습니다!

</aside>

코드

1. 외부함수는 꼭 useCallback 나 useMemo 로 감싸주세요.

   obj << 변수가 함수 밖에 있으면 혹시 active 가 아닌 다른 변수가 생겼을 때, 변수들이 바뀔때마다 새롭게 obj 변수를 불러오게 됩니다.

// src/components/WeatherForecast/WeatherForecast.jsx

function WeatherForecast() {
  const active = useRecoilValue(tabMenuAtom);

  const getContent = useMemo(() => {
    return obj[active];
  }, [active]);

  return (
    <main>
      <ForecastTab />
      <section>{getContent}</section>
    </main>
  );
}

1. 상황마다 렌더링 될수도 있고 안될 수 있는 부분은 2번 렌더링 안되게 useCallback 으로 묶어주세요

// src/components/Header/Header.jsx

function Header() {
  const [slide, setSlide] = useRecoilState(slideMenuAtom);

  const renderContent = useCallback(() => {
    return <p>슬라이드 컴포넌트 렌더 예정</p>;
  }, []);

  return (
    <>
      <S.HearderNav>
        <S.HeaderList>
          <li>
            <Link to="/example">위치 페이지</Link>
          </li>
          <li>
            <S.HeaderList sub>
              <li>
                <Link to="/example">
                  <img src={alarm} alt="알림 페이지" />
                </Link>
              </li>
              <li>
                <Link to="/example">
                  <img src={share} alt="공유 페이지" />
                </Link>
              </li>
              <li>
                <S.HeaderButton onClick={() => setSlide(true)}>
                  <img src={navMenu} alt="슬라이드 메뉴 버튼" />
                </S.HeaderButton>
              </li>
            </S.HeaderList>
          </li>
        </S.HeaderList>
      </S.HearderNav>

      {slide && renderContent()}
    </>
  );
}

1. 모든 페이지/컴포넌트 함수를 마지막에 export default memo(컴포넌트, 비교함수);로 묶어주세요 비교함수는 “react-fast-compare” 패키지를 추천드립니다.

// 전체 페이지 해당

import { memo } from 'react';
import isEqual from 'react-fast-compare';

const ForecastTab = () => {
  const setActive = useSetRecoilState(tabMenuAtom);
  return (
    <S.ForecastTabList>
      <li>
        <button onClick={() => setActive(0)}>오늘</button>
      </li>
      <li>
        <button onClick={() => setActive(1)}>내일</button>
      </li>
      <li>
        <button onClick={() => setActive(2)}>이번주</button>
      </li>
    </S.ForecastTabList>
  );
};

export default memo(ForecastTab, isEqual);

1. 코드를 작성할때는 에러 케이스를 모두 위에 올려버리고 로직은 아래에 두는게 유지보수 하기에도 용이하고 나중에 오류케이스 함수를 분리시키기에도 유리합니다.

   onRemoveItem 함수를 아래와 같이 바꾸는게 좋은 예시가 될 것 같아요

// src/components/Location/LocationResult/LocationResult.jsx

const onRemoveItem = (id) => {
  if (!edit) {
    return;
  }
  setPinned(pinned.filter((pin) => pin.id !== id));
};