오늘 공부한것 & 기억하고 싶은 내용
React 기초 강의를 듣고 최종 과제를 만들게 되었다.
API를 받아 데이터를 넣는 작업이었는데, useEffect, fetch, Link, useParams를 다 활용하여 코드를 짜보는 연습을 했다.
그 중에 좀 중요하다고 생각하는 것을 정리해보려고 한다.
API를 async, await로 불러와서 fetch하는 작업
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
const getApp = async () => {
const json = await (
await fetch(
`API주소`
)
).json();
setData(json);
setLoading(false);
};api주소는 처음 렌더링될때 한번만 동작하면 되기 때문에 useEffect 를 사용해서 한번만 불러왔다.
useEffect(() => {
getApp();
}, []);Link 연결
보통 마크업할때는 a태그를 사용해서 href에 링크를 걸어주면 페이지 이동이 가능한데, 그렇게 되면 처음부터 모든게 새로고침되기 때문에 바뀌는 부분만 렌더링 되는 리액트와는 다른 역할이기 때문에, 따로 있는 기능이 Link이다.
Link는 실제 서버에 요청을 보내지 않고, url만 변경되기에 바뀌는 부분만 새로 렌더링 되기 때문에 a태그에 비해 훨씬 효율적이라고 할 수 있다.
어플리케이션 내부에서 페이지를 전환해야 할 때는 Link를 사용하고,
외부 사이트로 이동할때는 전체 데이터를 새로 불러와야하기 때문에 a태그를 사용해야한다.
useParams
리액트에서 라우터 사용 시 파라미터 정보를 가져와서 활용하고 싶다면useParams라는 훅을 사용하면 된다. 생각보다 간단해서 놀랐다.
먼저 useParams를 import하고 useParams 정보를 하나의 변수에 저장해서 사용하면 끝이다..
파라미터의 값이 1이라면 화면에 1이라고 뜰 것..
import { useParams } from "react-router-dom";
function Detail() {
const { id } = useParams(); // useParams에서 'id' 값을 가져와서 사용
return <h1>{id}</h1>;
}
배운점 & 느낀점
코드 챌린지를 하면서 리액트의 기초 개념을 모두 익혔다.
아직까지도 강의 따라치느라 바쁘지만 단 몇줄이라도 내가 스스로 코드를 써서 데이터를 불러왔다는 것에 의미를 두고 앞으로도 리액트와 더 친해지고 싶다..
