기록용...
리액트에서 대량의 리스트 구현시 성능 최적화를 위해 react-virtualized를 사용 중 모바일과 데스크탑 화면 전환시 props로 전달할 height , width를 반응형으로 구현할 방법을 생각하다 다음과 같은 글을 찾음.
https://stackoverflow.com/questions/35073669/window-resize-react-redux/35075190#35075190
분명 react-virtualized 내에서 해결하는 방법이 있을 거라 짐작하지만 위 내용도 흥미로워서 기록.
답변자가 제대로된 테스트를 하지는 않았으나 리덕스 스토어에 스크린 사이즈를 기록하여 상태변화시 앱의 상태를 변화시킨다는 내용.
실제 스크린 사이즈가 변화될 때 직접 변화되는 상태 값에 접근하는 것이 아닌 복사한 후 복사값을 가져오기 때문에 몇가지 문제가 발생 가능.
단순히 부분적으로 참조할 용도로 사용한다면 문제가 없음.
구현 후 기록(문제없이 동작)
1. 앱 시작 컴포넌트에서 컴포넌트가 마운트 될 때 미디어쿼리 정보를 리덕스에 기록
2. 기록된 정보를 토대로 작업할 dispatch함수 작성
3. 1번에서 미디워쿼리 (width)값이 바뀔 때 알수 있도록 미디어쿼리 리스너 등록
4. 리스너의 변화에 따라서 리덕스 스토어의 값 변경할 수 있도록 dispatch함수 작성(2번과 같을 수 있음)
5. 리덕스 스토어 값을 여러 컴포넌트에서 사용.
- 미디어쿼리 정보 변경시 여러 컴포넌트의 상태가 자동으로 갱신됨.
어떤 외부 상태값을 토대로 css 미디어쿼리를 구현하려면 어쩔 수 없이 이런 방법을 사용해야할 것이다.
큰 그림만 알 수 있도록 대강 적었지만, 누군가에게는 도움이 되었기를...