pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
87
投稿した質問数 1
pushState로 경로를 바꿀 때는 렌더링이 다시 일어나지 않는데,
popstate 이벤트에서는 왜 렌더링이 필요한 건가요
回答 2
0
pushState는 브라우져의 히스토리 상태만 변경합니다. 리액트 컴포넌트는 이 상태와 전혀 상관없는 객체이고요. 그렇기 때문에 별도의 리액트 상태(path)를 두었는데요. 이를 변경해 리액트 컴포넌트가 다시 그려지도록(리렌더) 의도한 것입니다.
정리하면,
pushState: 히스토리 상태 변경
setState: 리액트 컴포넌트 상태 변경 → 리렌더 유발
0
안녕하세요, 인프런 AI 인턴입니다. theblessedcity님.
리액트와 관련해서 pushState와 popstate 이벤트에 대한 질문을 주셨군요. 이 두 개념은 브라우저의 히스토리 API와 관련이 있으며, React와 함께 사용할 때 약간의 차이점이 존재합니다.
pushState:pushState는 브라우저 히스토리 스택에 새로운 상태를 추가하거나 URL을 업데이트합니다. 그러나, 이는 브라우저의 주소 표시줄(URL)만 변경할 뿐이고, 실제로 페이지를 리렌더링하지는 않습니다. 이는 사용자가 페이지를 탐색하는 동안 히스토리 스택을 수동으로 조작할 수 있는 메커니즘을 제공하기 때문입니다.
- 이와 관련하여, React 애플리케이션의 경우, URL 변경에 따른 적절한 렌더링을 수행하려면 자신의 라우팅 로직(예: React Router)을 사용하도록 설정해야 합니다.
popstate이벤트:popstate이벤트는 사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 클릭할 때 발생합니다. 이 이벤트는 히스토리 스택의 상태가 변경되었음을 나타내며, 애플리케이션에서 해당 변경에 대응하여 필요한 리렌더링이나 상태 변경을 처리할 수 있게 합니다.
- 따라서,
popstate이벤트는 기존 상태로 전환될 때 필요한 리렌더링을 트리거할 필요가 있을 수 있으며, 이는 종종 라우터 설정 내에서 수행됩니다.
관련된 질문과 답변을 다음 URL에서 확인하실 수 있습니다:
- React - Router 활용하여 URL과 상태 관리하기
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
잘못된 useEffect 사용?
1
65
2
useEffect 의존성 질문
1
58
2
orderableProductItem 에 관하여...
0
59
2
강의 자료, 블로그, 깃 주소
0
63
1
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
1
104
2
FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유
1
123
1
dispatch 함수도 리렌더링 유발하지 않나요?
1
204
2
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
1
160
2
replaceState를 쓰지 않는 대안
1
196
2
setValue 메서드를 바인딩 해야 하는 이유
1
163
2
MyReact를 IIFE(즉시실행함수)로 설계하신 이유
0
209
2
[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교
0
130
1
useRef 관련하여 질문드립니다
0
152
2
렌더 프롭 관련하여 질문드립니다
0
183
2
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
1
395
2
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
1
318
2
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
1
356
2
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
1
281
2
[4.1장 레프 훅] useRef관련 질문이있습니다.
1
334
1
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
2
284
1
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
1
432
2
[1.3.6 상태정의] state 관련
1
259
1
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
1
272
1
[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.
1
425
2