내일배움캠프 React트랙 50일차 회고 (2022.01.09)

오늘 새삼스레 느낀거지만, console.log쓰는게 너무 재미있다.

console.log로 함수가 어떤 값을 리턴하는지만 잘 파악해도 대부분의 로직과 오류가 해결되니까 재밌는 것 같다.

 

  const counter = useSelector((state) => state.counter.number);

state는 Slice이름안에 지정해준 프로퍼티를 객체로 지니고 있다.

 

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
        <Route path="works/:id" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

useParams는
path의 파라미터(:id)를 key로 가지고, URL의 숫자값을 value로 가지는 프로퍼티를 가지고 있다.

 

  useEffect(() => {
    dispatch(__getTodo());
  }, [dispatch]);

코드를 분석하는데, useEffect의 디펜던시 어레이에 dispatch라는 함수명이 적힌걸 보고 좀 의아했다. 빈배열을 넣거나, state와 같이

변경될때마다 useEffect를 다시 실행시키는 용도로 보이지 않았기 때문이다. 

그러다 공식문서를 참고해보니, 금방 답이 나왔다. 즉, 빈배열로 만들어도 [dispatch]를 적어넣어도 기능적으로는 아무 차이가 없으나 어떠한 값이라도 적어주는 것을 권장하기에 warning으로 따로 eslint에서 알려준 것이었다.