하루 종일 삽질한 기억 밖에 없는 것 같다. 프로젝트 남은 기간이 얼마 되지 않는데 제대로 구현 된 페이지가 얼마 없어서 심적으로 힘들었다. 팀에서 내가 제일 느렸다. 2주간 겨우 2개 페이지를 잡고 있어서 그런 것 같다.
8일차에 작업한 내용은 회원가입 축하 페이지이다.
가입을 하면 가입자의 이름이 위 이미지처럼 url이 다른 축하 페이지에서 보여져야한다. 같은 페이지 내에서 컴포넌트를 호출 해 보여주는 것이 아닌 url이 다른 새 페이지로 이동해야해서 이 부분에 대한 고민이 있었다.
접근 방법
아래는 페이지를 구현하기 위해 접근 했던 방법이다.
1. result 값을 받았을 때 컴포넌트를 리턴하기
.then(res => {
return <Congratulation userName={this.state.name} />;
})우선 result 값을 받았을 때 컴포넌트를 랜더링 하는 방법을 썼다. 이 방법은 새 url로 넘어가는 방법이 아니라 다시 생각하게 되었다.
그리고 axios를 활용해 구현해보려고 했으나 에러를 어떻게 다룰지 몰라 다시 fetch 함수를 사용하기로 했다. fetch 함수는 알고 있어 axios보다 구현 상 어려움이 없을 것 같았다. axios가 request를 보낼 때 string으로 바꾸지 않아도 되어 편했는데 에러 핸들링에서 어려움을 겪어 좀 더 배우고 사용하는 방향으로 바꾸었다.
2. withrouterHOC를 이용해 함수로 연결 시도
두 번째 시도는 url 구조부터 다시 확인했다. 다시 확인하니 uri가 바뀌어서 routes.js 파일에 url부터 연결했다. 그리고 withrouterHOC를 생각하고 함수로 연결을 시도했다.
새로운 함수를 만들어서 구현해보려고 했는데 이 방법은 fetch 후에 어떻게 연결할지 감이 안 잡혔다. 그렇다면 fetch 안에서 구현해보면 되지 않을까 해서 .then에 넣고 url로 이동한 다음에 컴포넌트를 렌더하는 방향으로 잡았다.
.then(result => {
if (result.message === "success_signup") {
this.render(
return (<Congratulation userName={this.state.name} />;
)
};
}해당 방법으로 했을 때도 url이 있는데 사용하지 못하는 것 같아 fetch내 조건은 그대로 가져가되 컴포넌트 렌더 대신 다른 방법으로 해보기로 했다.
3. withrouterHOC 기능 내에 있는 메소드를 활용!
2가지 방법을 시도 했는데도 되는게 없어 멘토님께 질문을 했다. 그렇게 알아낸 방법은
this.props.history.push에 state를 같이 보내는 것!!!!!
withrouterHOC는 여러 메소드를 지원하는데 state 값을 넘겨 줄 수도 있었다. 그러면 페이지가 넘어갈 때 props로 전달 받아서 화면에 표현해줄 수 있다.
(참고 stackoverflow
https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4)
if (result.message === "success_signup") {
this.props.history.push({
pathname: "/signup-congratulation",
state: { userName: this.state.name },
});
}위 코드로 회원가입 페이지에서 push 메소드에 state 값을 url 주소와 함께 넘겨주었다.
prop로 받았을 때 콘솔로 찍어보니
props로 객체의 여러 값이 전달 되었다. state로 전달된 값을 접근해 화면에 보여줄 수 있게 props 값을 수정했다.
<p className="nameTxt">{`${this.props.location.state.userName}님,`}</p>
<p className="congratTxt">KKAKKA의 회원이 되신걸 축하드립니다 :)</p>그랬더니 내가 원하던 값이 제대로 넘어왔다!
