[TIL] 내일배움캠프 React 과정 2023.01.25

Today I Learned

• Recoil 공부하기
• 리스트 클릭 시 지도에서 해당 위치로 이동하도록 구현하기

 

---

Recoil 공부하기

const todoListState = atom({
  key: 'todoListState',  // unique ID
  default: [], // initial value
});

const [todoList, setTodoList] = useRecoilState(todoListState);

코드 몇 줄로 전역 상태 관리 끝...

 

공식 문서

https://recoiljs.org/ko/docs/introduction/getting-started/

https://recoiljs.org/ko/docs/basic-tutorial/atoms

https://recoiljs.org/ko/docs/basic-tutorial/selectors

 

블로그 참고

https://basemenks.tistory.com/200

https://hell-of-company-builder.tistory.com/225

 

유튜브 영상

https://youtu.be/t934FOlOMoM

https://youtu.be/7nwpEiSpPqY

 

useQuery 자동 실행되지 않게 설정하기

const { data } = useQuery(
  ['todos', id],
  () => fetchTodoById(id),
  {
    enabled: !!id,
  }
);

• enabled(boolead) 는 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.
• enabled의 default 값은 true로 되어 있지만, 위와 같이 id값이 존재하지 않을 경우 false로 변경해 줌으로써 자동 실행을 막을 수 있다.

 

출처

https://velog.io/@kimhyo_0218/React-Query-리액트-쿼리-시작하기-useQuery

https://jforj.tistory.com/243

 

React Suspense란?

function Main() {
  return (
    <main>
      <h2>Suspense 사용</h2>
      <Suspense fallback={<p>사용자 정보 로딩중...</p>}>
        <User resource={fetchData("1")} />
      </Suspense>
    </main>
  );
}

• Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.

리코일 강의 보다가 알게 된 기능인데 너무 좋은 거 같다. 한 번 써 보고 싶네😊

 

출처 https://blog.mathpresso.com/conceptual-model-of-react-suspense-a7454273f82e

참고

https://www.daleseo.com/react-suspense/

https://velog.io/@bbaa3218/React-Suspense란

 

---

회고

오늘은 원래 배우고 싶었는데 계속 미루게 됐던 Recoil 공부를 했다. 팀원들과 이번 프로젝트를 기획하면서 Recoil을 사용해 보자는 의견이 있었지만 어디에 써야 될지를 몰라서 아직 사용 안 하고 있었는데 지도 API에 위도, 경도를 보내줄 때 얘를 전역 state로 이용해 보자는 의견에 따라 오후 동안 Recoil을 공부했다. 공식 문서랑 유튜브 영상, 블로그 글을 참고했고 일단 기초적인 부분은 어떻게 쓰는지 이해했다. 근데 selector까지는 아직 잘 모르겠다. 이번에 Recoil 기초를 좀 다져 놓고 최종프로젝트 때 제대로 한 번 써 보고 싶다.

 

리스트를 클릭했을 때 지도에서 해당 위치로 이동하도록 하는 걸 어떻게 구현할까 고민하다가 map을 하위 컴포넌트에 props로 넘겨주는 방식으로 한번 시도해 봤다. 더 나은 방법이 있을 거 같긴 한데 내 능력에서 최선인 방법이었다.. 어쨌든 오늘 기능 하나는 구현했으니 다행이다.