반응형
리액트를 사용하여 페이지 이동 함수를 만들고 있다.
[ 결제하기 ] 버튼을 누르면 goPay() 함수가 실행되며 history.push() 를 통해 결제 페이지로 넘어가야 한다.
하지만 url만 변경되고 빈 화면이다. 또한 새로고침을 해야만 이동한 페이지가 보이는 이슈가 발견되었다.
일단 url은 잘보이는 걸 보니 history.push() 는 잘 먹혀들어간다.
그럼 문제는 새로고침이라는 결론에 도달했다. 자 그럼 해결해보자 !
React(50) history.push 로 url 만 변경되고 새로고침이 안되는 이슈
결제하기 버튼을 누르면 goPay 함수로 연결된다.
goPay() 에서는 history.push로 ' /payment ' 페이지로 이동한다.
<button onClick={goPay}>결제하기</button>
function goPay() {
history.push(`/payment`);
}
왜 나에게 이런 일이?
이유는 url 만 변경되고 컴포넌트가 재렌더링이 되지 않아 useEffect를 통해 바뀐 화면을 그리지 못하기 때문이다.
그렇기 때문에 렌더링을 한번 더 시켜주면 된다.
문제해결
여러가지 방법이 있겠지만 나의 경우는 새로고침 기능을 추가해주었다.
location.reload(); 내장함수를 코드 바로 뒤에 붙였더니 url 이 이동하면서 뒤이어 새로고침을 실행시켜서 잘 보인다.
function goPay() {
history.push(`/payment`);
location.reload(); // 새로고침 내장함수 추가!
}
반응형
'React' 카테고리의 다른 글
React(51) 체크박스 에러 You provided a 'checked' prop to a form field without an 'onChange' handler (0) | 2021.10.18 |
---|---|
Styled-components(1) 스타일드 컴포넌트 설치하기 (0) | 2021.10.12 |
React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 (0) | 2021.09.25 |
TypeScript(2) 타입스크립트로 포팅하기 (props, useState) (0) | 2021.09.22 |
TypeScript(1) 타입스크립트 설치하기 (0) | 2021.09.15 |
댓글