TIL-23.06.03

 

 

문제점리스트 페이지 내 각각의 리스트에는 북마크 기능을 수행할수있고, 해당 북마크는 각각의 리스트컴포넌트의 자식컴포넌트로 분리되어있다.자식컴포넌트인 북마크컴포넌트에서 post 서버요청을 진행 해 해당 리스트는 북마크 체크가 된 리스트로 변경하게끔 구성했다.리스트 페이지에서 전체 리스트 데이터를 get 요청을 해온 후, 그 데이터를 이용해 화면에 렌더링해주는 방식인데 북마크 체크시 체크가 되었다는 표시가 화면에 즉각적으로 렌더링되지않는 상황이 발생.. 화면을 새로고침해야 렌더링이 변경북마크 post 요청으로 체크가 된 ui렌더링을 즉각적으로 실행하게끔 코드를 수정해야했다.

 

 

 

 

시도한점리스트페이지에서 데이터를 get해오는 로직이 useQuery를 사용했나 , 일반적인 axios.get을 사용해 가져왔냐에 따라 다르게 작성할수있었다. 현재 우리 프로젝트는 axios.get으로 데이터를 가져오는 로직으로 작성되어있어 이에 맞게끔 코드를 작성했다.생각보다 간단했다. useState를 활용한것!리액트는 state에 변화가 있으면 자동으로 재 렌더링하는 속성이 있다. 이걸 이용하면 즉각적인 렌더링이 가능했다.해당 북마크 컴포넌트가 체크되었는지를

 const [bookMarkCheck, setBookMarkCheck] = useState(isCheck);

  const bookmarkMutation = useMutation(
    () => api.post(`/api/bookmark/${storeId}`),
    {
      onSuccess: () => {
        setBookMarkCheck(prev => !prev);
      },
    }
  );
  const onClickBookMarkHandler = async e => {
    e.stopPropagation();
    bookmarkMutation.mutate();
  };
  
   return (
    <div>
      {bookMarkCheck ? (
        <OnBookMarkIconButton onClick={onClickBookMarkHandler} />
      ) : (
        <OffBookMarkIconButton onClick={onClickBookMarkHandler} />
      )}
    </div>
  );

useState 훅을 사용해 관리해주었고, 해당 북마크의 post요청이 성공하면 useMutation을 사용해 state값을 변경해주는 로직을 작성해주었다. 컴포넌트를 렌더링해주는 return 스코프에 해당 state를 조건부 렌더링에 사용해 즉각적인 렌더링 변경이 가능했다.생각보다 간단한 문제였다. 리액트로 프로젝트를 하다보면, 즉각적인 렌더링이 왜 안되는지에 대한 문제를 자주 마주치게된다. 아직까지는 이러한 문제를 마주칠때마다 머리부터 부여잡지만, 문제를 해결해보면 막상 크게 어렵지 않다는걸 반복해서 깨닫고있다.

 

 

 

 

알게된점

컴포넌트 간에 상하관계를 파악하고, 이로 인한 렌더링 순서를 판단하고 있는 것 또한 중요하다