Drawer Navigator에 삽입한 카지노 게임 사이트 변경하기
key 를 통한 카지노 게임 사이트 리렌더
결론부터 말하자면, 리액트 컴포넌트를 강제로 언마운트시키고 리렌더를 시키고 싶다면 변경할 컴포넌트에 key 속성을 부여하고 매번 바꾸어주는 방법을 사용할 수 있다. 좀더 엄밀히 말하자면 기존 컴포넌트 인스턴스를 지우고 새로 만든 컴포넌트를 마운트시키는 방법이다.
프로필 카지노 게임 사이트 변경 버그
CreateDrawerNavigatorAPI 를이용해만든사이드메뉴내비게이터상에사용자의프로필카지노 게임 사이트를표시하는경우에, 사용자가프로필스크린으로가서카지노 게임 사이트를변경하고돌아오면변경된카지노 게임 사이트가사이드메뉴에서제대로표시되지않는현상을발견했다. 원인을아직도찾지못했다. 바뀐카지노 게임 사이트URL 을서버에서정상적으로보내주는것을확인하였고, 디버깅콘솔에서도즉시바뀐URL 이출력되는것을확인하였다. 답답한것은, 사이드메뉴에서는새로바뀐카지노 게임 사이트도, 이전의카지노 게임 사이트도둘다보이지않고그저그영역이하얗게표시될뿐이라는점이다. state, props 업데이트를이렇게저렇게시켜보았지만소용이없었다. 모든부가적인코드라인을제거하고Image 태그만남겨도동일한현상이발생했다.
결국, 새로 바뀐 URL이 적용될 수 있도록 강제로 언마운트 시킨 후 리렌더 조치를 하기로 하였다.
Key 속성을 통한 강제 업데이트
리액트 공식문서에 따르면, 리액트 컴포넌트는 고유의 Key 속성을 부여받음으로써 해당 항목을 식별하고, Key 가 이전과 달라지면 새로운 컴포넌트 인스턴스를 생성한다. Key 속성에 대해서는 배열의 각 항목에 고유한 값을 부여하기 위한 쓰임새만 알고 있었는데, 이번에 컴포넌트 강제 업데이트 방법을 고민하면서 새롭게 알게 된 내용이다.
그렇다면 어떻게 Key 를 변경시켜줄까? 다양한 방법이 있을 수 있겠지만, 나는 해당 컴포넌트의 프라이빗 변수로 componentKey 를 선언하고, constructor 에서 null 로 초기화한 후 props로 받은 카지노 게임 사이트 url 이 변경될 때마다 componentKey가 업데이트되도록 했다. 현재시각을 componentKey로 준 것은 두가지 이유가 있는데, 첫째는 현재시각은 매초 달라지므로 매 호출시점마다 고유성이 보장되고, 둘째로 아무 의미 없는 값보다는 어느 정도 의미가 있는 값을 Key 로 주고 싶었기 때문이다. (하지만 의미있는 값을 찾기 위해 카지노 게임 사이트 url 을 파싱하는 과정을 만드는 것은 지나치다는 생각이 들었다)
https://gist.github.com/yeonwooz/45c6a2d22c2d438fda02a529f5d12c0f
하지만 도대체 왜일까
여전히 알 수가 없는 이 카지노 게임 사이트 렌더 오류는 과연 리액트 네비게이션 라이브러리가 가진 버그일까, 아니면 내가 props 와 state 를 전달하는 데에 문제가 있는 코드를 작성했기 때문일까? 원인을 꼭 찾고 싶다. 접근방식을 다른 관점에서 고민해보아야 할 것 같다.
People vector created by pikisuperstar - www.freepik.com
참고링크
- 리스트와 키
- Fully uncontrolled component with a key
- 4 methods to force a re-render in React
- Understanding React componentDidMount and how it works
- https://stackoverflow.com/questions/55236953/unmount-or-re-render-screen-in-drawer-navigator
- https://stackoverflow.com/questions/35792275/how-to-force-remounting-on-react-components
