[React] Recoil, State의 다른 점

[React] 🔄️무한 렌더링 원인 찾기
이전 게시글에서 무한루프에 대한 글을 썼다. 이번에는 다이닝 코드 프로젝트를 만들면서 헷갈렸던 부분과 recoil 그리고 state 다른점에 대해서 써보려고 한다.

좋아요 버튼을 조금 수정했다. 채워진 하트가 되었을 때 좋아요 목록 페이지에 장소가 추가 되어 있는 것을 확인 할 수 있고, 빈 하트 일 때는 좋아요 목록에 저장되지 않는다.

📌 좋아요 버튼을 눌렀을 때 전체선택

아래 이미지와 같이 좋아요 버튼 한 개만 눌렀는데 전체가 다 눌려있는 것을 확인 할 수 있다.

코드가 길어질 것 같아서 다른 부분의 코드는 생략됨

이렇게 된 이유는 내가 recoil을 쓰면서 전역으로 관리를 했다. LikeIcon은 각각의 컴포넌트마다 atom.js에서 불러서 사용되는데 저장된 공간이 하나이기 때문에 컴포넌트마다 동일하게 적용될 수 밖에 없었던 것이다 .

useState는 보관할 수 있는 저장소가 각각의 컴포넌트 마다 있는데 recoil은 전역에 하나만 만들었고, 컴포넌트마다 생성된 하나를 같이 쓰기 때문에 컴포넌트마다 동일한 state가 적용된다. 즉 이런 경우에는 useState를 사용해야 한다.

➕ 추가적으로 boolean 타입 쓸 때는 무조건 변수명 앞에 is를 붙여야 한다.

📍recoil 사용 (잘못된 작성법)

// Place.jsx
{ 
    placeList.map((item, i) => {
    return (
      <SwiperSlide key={item.id}>
        <PlaceItem>
          <PlaceBox>
            <img src={getCafeImage(i + 1)} alt={item.title} width="100%" />
          </PlaceBox>
          <PlaceTitle>
            <h4>{item.title}</h4>
            <LikeIcon item={item} /> // 좋아요 아이콘 반복생성
          </PlaceTitle>
        </PlaceItem>
      </SwiperSlide>
    );
  });
}

// LikeIcon.jsx
const [heartIcon, setHeartIcon] = useRecoilState(HeartIconState);

// atom.js
export const HeartIconState = atom({
  key: "heartIcon",
  default: false,
});

📍useState 사용

// LikeIcon.jsx

  const [isheartIcon, setIsHeartIcon] = useState(false);