[TIL]React react-router-dom을 이용한 코드챌린지

오늘 공부한것 & 기억하고 싶은 내용

react-router-dom이란

• 페이지의 이동을 구현시켜주는 라이브러리

1. App.js에 페이지 이동할 Route들을 일괄 작성한다.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

2. API 패치하기

  //API가 불려오기전 로딩 노출 유무
  const [lodaing, setLoading] = useState(true);
  //API담아줄 빈배열 생성
  const [dataList, setDataList] = useState([]);
  //async/await를 이용한 데이터 패치
  const getData = async () => {
    const json = await (
      await fetch(
        `https://`
      )
    ).json();
    //가공된 데이터 담아주기
    setDataList(json.data.results);
    //데이터가 다 불려오면 loding false
    setLoading(false);
  };

  useEffect(() => {
    //데이터 불러오기는 처음 화면 렌더링 될때만 실행
    getData();
  }, []);

3. 가공된 데이터를 가지고 코드 작성

return (
    <>
      {loading ? (
        <h2>Loding...</h2>
      ) : (
        <div>
          {dataList.map((item) => (
            <DetailView
              key={item.id}
              text={item.name}
              src={`${item.thumbnail.path}.jpg`}
            />
          ))}
        </div>
      )}
    </>
  );

배운점 & 느낀점

useParams를 써보면서 URL에 있는 파라미터에 대한 접근이 쉽다는걸 배웠다.
react-router-dom을 사용하면서 버전에 따른 코드가 다르다는걸 알게 되었다.
v6에선 swich대신 Routes를 사용하고, Route안에 component말고 element를 사용한다는것을 배웠다.
< Route path="" element={}>

코드리뷰

코드리뷰를 하면서 다른분들의 코드를 보며 배울점을 많이 느꼈다.

1. App파일에 route를 바로 적지 않고 따로 빼서 넣어준게 좋아보였다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    errorElement: <Error />,
  },
  {
    path: '/character/:id',
    element: <Details />,
    errorElement: <Error />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

2. json으로 받은 데이터가 한개일때 useState({})초기값을 객체로 만들어 객체 안에 담은다음 사용하는게 코드의 가독성이 더 좋아보였다.
   (data.name / data.id 등 바로바로 꺼내쓰기가 더 좋음)

const [data, setData] = useState({})

return(
	<div>data.name</div>
)