몇일차인지 고민하다가 점점 잊어버릴거같아서 그냥 날짜를 적었다.
오늘 강의에서 코드리뷰를 공유했는데 여러명의 코드를 보니 내가 모르던 다양한 것들이 있었다. 내가 앞으로 해야할 recoil이 있었고 react-router에서 Outlet이라는 키워드를 처음봤는데 나름 유용해보였다. 그리고 컴포넌트의 로딩을 기다리는동안 로딩 화면을 처리해주는 Suspense도 알고는 있었지만 사용하는건 처음 봤다.
react-query도 있었는데 굉장히 유용하지만 완벽히 사용하기는 어렵다고 한다. 이 짧은 시간에도 내가 모르는 것들이 이렇게 많이 나오다니.. 그래도 항상 느끼는거지만 한번 해보면 몇몇개 빼고는 크게 어렵지않다.
Recoil
Redux는 연습한다고 몇번 써보긴 했는데 recoil은 처음이다.(Redux도 요즘은 Redux-toolkit을 많이 쓴다고 한다)
아무래도 처음이니 공식문서를 살펴보자 - recoil-getting started
우선 다른 상태관리와 같이 루트 컴포넌트를 감싸주는 부분이 있다.
import React from 'react';
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
} from 'recoil';
function App() {
return (
<RecoilRoot>
<CharacterCounter />
</RecoilRoot>
);그리고 우리가 사용할 state를 만드는 건 atom을 사용한다
const textState = atom({
key: 'textState', // unique ID (with respect to other atoms/selectors)
default: '', // default value (aka initial value)
});그리고 이 atom으로 만든 state가 우리가 컴포넌트에서 사용하게 되는 state가 된다
function TextInput() {
const [text, setText] = useRecoilState(textState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Echo: {text}
</div>
);
}여기서 useRecoilState는 useState처럼 state, setState를 반환하는데, 이 외에도 useResetRecoilState도 있는데 이는 처음에 atom을 생성할 때의 default값으로 상태를 초기화시켜준다. 매번 default값으로 setState하지않아도 되니 좋다
강사님은 이 세가지를 묶어 hook으로 관리하는게 편하다고 알려주었다.
그리고 덧붙여 recoil이 아직 완전한 버전이 아니고 좀 더 고급 기능들을 많이 사용하게 되면 로직이 굉장히 복잡하고 가독성이 떨어지므로 recoil은 간단하게 사용하는걸 추천했다.
내일 목표
현재 기업과제 프로젝트에 레이아웃과 api 부분을 테스트하고있는데 추가로 적용해야 할 게 recoil 외에도 intersection observer를 사용한 무한스크롤, react-router 설정이 남았다. 이게 완료되면 디테일과 추가 구현을 진행할 것이다.
- api call 하는 부분 recoil state 사용
- intersection observer 무한스크롤 구현
- react router Outlet 써보기
