Frontend/React
-
[React] Rerendering 성능 최적화Frontend/React 2021. 11. 21. 21:04
Why Optimization? 인터넷 없이 살 수 없는 요즘, 웹사이트는 빠르게 로딩되고 반응해야 한다. 사용자가 빠른 웹사이트를 선호한다기 보단, 느리고 기다려야 하는 웹사이트를 싫어하기 때문이다. 또한 서비스를 정상적으로 제공하지 못하는 상황이 올 수 있으므로 최적화는 필수이다... How? 디자인과 마찬가지로 서비스를 제공하는 입장에서는 사용자 관점을 생각하는 것이 좋다. 첫 페이지 렌더링 속도 홈페이지 반응 속도 기능 동작 속도 개발 및 테스트를 진행하다 문득... 내 프로젝트는 왜 이렇게 렉이 걸릴까? 하는 생각이 든다면 최적화의 필요성을 느낄 것이다. 문제를 해결하기 위해선 원인을 아는 것이 가장 중요하다. [진단하기] 무엇 때문에 느려졌는가? 어느 상황에서 느려지는가? 다른 곳에서 영향을 ..
-
[React] Recoil, 리액트 내장 상태로 된 전역 상태 관리Frontend/React 2021. 10. 12. 20:31
Why Recoil? 리액트에서 상태 관리를 통해 View를 관리할 때, 전역 상태가 필요한 때가 있다. Context API Hook을 통해서 이를 어느정도 해결할 수 있지만 단일 값만 저장할 수 있고 여러 값들의 집합을 담을 수는 없었다. Redux 보통 이를 해결하기 위해 외부 라이브러리로서 많은 사랑을 받은 Redux를 사용했고 필자도 그랬다. 필자가 사용했을 때 Redux는 액션을 통해 상태를 관리하기 때문에 어떤 데이터가 어떻게 변경되었는지 볼 수 있었다. 이를 통해 수월한 테스트를 할 수 있었던 것 같다. 데이터를 저장소에 저장할 수 있어 브라우저가 종료되더라도 상태를 정할 수 있었다. 복잡한 계층구조를 가진 프로젝트라도 간단히 상태관리를 할 수 있었다. 모든 Redux 상태를 확인할 수 있..