[원티드] 5월 10일 TIL

강의 리뷰

👉  scss모듈은 소문자를 권장하셨다

👉  components → common 폴더를 생성하여 빼줄 수 있는

부분은 빼준다.

👉  try catch finally 까지 추천

👉  axios안에 url 넣는건 권장되지 않음

따로 빼서 관리하기

👉  import 절대경로 (라이브러리)위에

상대경로 아래로 하셨다.

👉  디바운스 딜레이 보통 300정도

기획이나 서버에 맞춰서 설정해주신다.

👉  prev.map((todo) => todo.id === Number(id) ? {...todo, done: checked} : todo)

👉  npm camelCase 이용해서 api로 넘겨받는 형식 통일하기

👉  query도 service에서 axios안에서 params로 넣어주기

👉  type alias보단 interface가 권장된다.

👉  const resetter =useResetRecoilState(recoilState)

👉  ul아래에는 바로 li를 넣어주기 (lint에러남)

👉  Rout path= ‘:city’ : ⇒ 파라미터받아옴

👉  main nav footer 태그 사용하자

👉  NavLink는 링크변경 시 클래스네임 추가로 스타일 제어 가능

👉  time tag(시간 태그) sup tag(위 첨자)

👉  setInterval쓸 때 clearInterval 안 해주면 마운트 될 때마다 겹쳐서 호출되기 때문에

unmount될 때 반드시 clearInterval 해줘야 한다

👉  recoil을 크게 쓰는 것은 권장하지 않음  

 → 한 페이지 안에서 쓰는게 적당하다고 생각하심

👉  atom 키 값은 앞에 # 붙히시는 것을 선호함 ‘#todoListState’

👉  useResetRecoilState ⇒ default값으로 돌아간다

👉  recoil은 간단하게 사용할 때 장점이 있기에

selectorFamily 등 실제 적용하면 가독성이 너무 떨어짐

👉  베타 버전이기 때문에 최대한 기본기능에 충실하기

👉  ❓usePrevious에대해 (커스텀훅)

전 props 또는 state를 얻는 방법?

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

//useState 의 값 변경은 re-rendering을 유발하지만 useRef의 값 변경은 그렇지 않다.

👉  if(prevdone ≠ done ) {

} 보다 

if(prevdone === done) return 

그냥 위에서 원하는경우가 아닐 때 리턴시켜버리는 편이 훨씬 보기가 편하다

👉  코드 간결함을 위해 hooks 라는 다른 파일안에 라이브러리에 있는 훅을 import

👉  useTimeOutFn

```jsx
import { useTimeoutFn } from 'react-use';

const Demo = () => {
  const [state, setState] = React.useState('Not called yet');

  function fn() {
    setState(`called at ${Date.now()}`);
  }

  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);
  const cancelButtonClick = useCallback(() => {
    if (isReady() === false) {
      cancel();
      setState(`cancelled`);
    } else {
      reset();
      setState('Not called yet');
    }
  }, []);
```

👉 —> transition-delay로 간단히 처리됨

눈에 보이는 것은 왠만하면 css에서 처리하는 것이 좋다