데이터 주고받기 포스팅
그동안 React로 프로젝트를 하면서 부모, 자식간에 데이터 주고받기에 대해 포스팅했습니다.
두개의 포스팅을 작성한 문제는, 프로젝트를 진행할 수록 새로운 문제들을 만났기 때문입니다.
1. 컴포넌트를 호출하면서 간단한 상태값만 주고 받았습니다.
2. React Router를 사용하면서 다른 방법을 사용했습니다.
3. 프로젝트의 규모가 커지면서 상태관리 라이브러리를 이용했습니다.
새로운 문제!!
오늘 포스팅에서는 위 3개와 다른 새로운 문제에 대해 다루고자 합니다. 조건은 아래와 같습니다.
1. React Router를 사용한다.
2. 상태관리 라이브러리(Recoil)은 사용하지 않는다.
3. 자식은 부모에게 함수를 받아서 상태를 업데이트한다.
4. React Router props를 이용해서 페이지 이동 등의 기능을 구현한다.
4번 조건을 제외한다면 "React Router 부모-자식 상태 주고받기" 포스팅을 참고해서 해결할 수 있습니다. 그런데 위 포스팅대로라면 React Router props를 이용할 수 없습니다.
React Router 및 React Router props에 대한 포스팅은 아래를 참고해주세요.
React Router 시작하기
예제 비교
한눈에 확인하기 위해서 예제를 통해 비교하겠습니다.
Router props를 전달받지 못하는 방식
<Route exact path="/admin/user" render={() => <User setTab={setTab} />} />위의 방식으로 User 컴포넌트에게 부모의 setTab함수를 전달하면 자식의 props를 출력했을 때, Router Props(match, location, history)를 전달받지 못합니다.
Router props를 전달받는 방식
<Route path="/admin/user" render={props => <User setTab={setTab} {...props}/> } />위의 방식으로 User 컴포넌트에게 부모의 setTab함수를 전달하면 자식의 props를 콘솔로 출력 했을 때, 다음과 같이 출력됩니다.
history: {length: 8, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/user", search: "", hash: "", state: undefined, key: "wa3z2n"}
match: {path: "/user", url: "/user", isExact: true, params: {…}}
staticContext: undefined
setTab: ƒ setTab(value)Router Props(match, location, history)를 전달받은 것을 확인 할 수 있습니다.
