TIW_220811

🦝 2022-08-11 (목)

오늘 한 것

• 차트 css 수정 및 부제목 추가
• card collapse하는 설정 버튼 css 수정 및 아이콘 hover시 nametag 띄워주는 tooltip 추가
• 최초 렌더링시 화면을 가득 채우기 위한 차트 필터 초기값 설정

오늘 배운 것

initializeState - Recoil에서 state initialization 하기

function MyApp() {
  function initializeState({set}:MutableSnapshot) {
    set(myAtom, 'foo');
  }

  return (
    <RecoilRoot initializeState={initializeState}>
      ...
    </RecoilRoot>
  );
}

• MutableSnapshot을 통해 상태를 초기화하기 위한 선택적인 initializeState
  prop을 취한다. 이는 모든 atom을 미리 알고 있고, 상태가 동기적으로 설정되어야하는 서버사이드렌더링과 호환되는 경우 지속되는 상태를 로딩하는데에 유용할 수 있다.
• 나는 비동기 처리를 위해 react-query를 사용하였기에 queryClient.fetchQuery로 데이터를 불러와 set함수를 통해 초기값을 설정하였다.

const initializeState = async ({set}: MutableSnapshot) => {
  const broadcastKeyList = await queryClient.fetchQuery('api 주소')

  set(broadcastTimeAtom, {
    broadcastKey: broadcastKeyList[broadcastKeyList.length - 1],
    timeGroup: '5m',
    timeGroupNumber: 60 * 5,
  })

  set(joinChartFilterAtom, [...broadcastKeyList.slice(-5)])
}

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot initializeState={initializeState}>
      // 생략
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
)

queryClient.fetchQuery - 쿼리를 가져오고 캐시하는데 사용할 수있는 비동기 메서드

• useQuery와 거의 흡사하지만 일부 옵션은 해당 메서드에서 사용이 불가하다.