개요
리액트를 배우면서 Create/Read/Delete를 배우고 배운 것을 활용하며, 직접 실습하는 시간을 가졌다. Update 기능은 배우지 않고 직접 해보며, 수업시간에 배운 방법 외에 다른 방법이 있지 않을까 찾게 되었고 직접 실습에 적용해 보았다. 수업시간에 배운 두 가지 방법과 내가 발견한 방법 한 가지를 살펴보겠다.
✨데이터베이스 불러오는 방식
데이터베이스를 json 서버에 띄운 후, 필요할 때 json 서버에서 데이터를 불러와 사용하는 방식 이용
1. Props
컴포넌트에 데이터를 전달하는 방법이다.
데이터 전달하기
Profile.jsx로 데이터를 전달한다.
<Profile profile={profile} />데이터 가져오기
props로 데이터를 받아 사용할 수 있다.
const Profile = ({profile}) => {
}2. useParams
페이지 이동 시 데이터 일부를 전달하고, 그 데이터를 이용해 전달받은 페이지에서 필요한 데이터를 json 서버에서 데이터를 불러오는 방식이다.
(같은 속성을 공유하는 두 개의 데이터를 이용할 때 유용)
데이터 전달하기
라우터 Link에 id값을 포함해 전달한다.
<Link to={`/profile/${career.id}`}>
{career.career}
</Link>데이터 가져오기
전달받은 id값으로 json 서버에서 데이터를 가져온다. (useParams, fetch 이용)
const {career} = useParams();3. useLocation
실습 중 버튼을 클릭하면 페이지가 이동하는 상황이었는데, 번거롭게 json 서버에서 두 번 데이터를 가져오지 않고 페이지 이동 시 데이터를 전달해 그대로 사용하고 싶었다.
위 두 가지 방법으로는 원하는 대로 코드가 구현되지 않아서 useLocation이라는 라우터를 찾아 활용하게 되었다.
데이터 전달하기
라우터 Link 내의 state에 데이터를 전달한다.
{{ ... }}로 괄호를 두개씩 감싸줘야 한다.
<Link to={{
pathname: '/update-profile',
state: {
profile : profile
},
}}>
<button>
수정
</button>
</Link>데이터 가져오기
useLocation을 이용해서 데이터를 가져와 사용할 수 있다.
const location = useLocation();
const profile = location.state.profile;