React Redux를 어떻게 적용했는지, Context API와 React Redux는 무엇이 다른지 정리해봤다. React Redux를 적용할 때 Redux Toolkit을 함께 사용했다. React Redux 공식문서에서도 Redux Toolkit을 사용하길 권장하며, 실제로 사용해보니 작성해야할 코드가 줄어들어 편했다. React Redux Redux는 action이라고 불리는 이벤트를 사용해 상태를 관리하는 패턴이며, React Redux는 Redux를 React에서 사용할 수 있는 라이브러리이다. React Redux는 Redux store에 상태를 저장하고 action을 dispatch해서 store의 상태를 변경한다. React Redux는 현재 React에서 지정한 공식 Redux UI 바인딩이다. 만약 React를 사용중이며 UI 바인딩에 Redux 개념을 이용하고 싶다면 React Redux 라이브러리가 가장 권장된다는 뜻이다. React에서 제공되는 기능과 …

React에서 props drilling을 피하고 싶거나 변수를 전역적으로 사용하고 싶을 때 상태 관리 라이브러리를 사용하곤 한다. React는 상태 관리가 가장 중요한 만큼 관련된 다양한 라이브러리들이 있다. 가장 대중적인 React Redux 부터 Recoil, Justand, Jotai, MobX 등등. 하지만 라이브러리를 사용하기 전에 React 자체 기능을 사용할 줄 알아야 한다고 생각한다. 라이브러리도 React 기능을 사용해서 만들어졌기 때문이다. 그래서 React 자체 기능인 Context API를 사용해 전역적으로 변수를 사용하는 방법을 정리했다. Context API 란? Context는 props로 전달하지 않고도 컴포넌트 트리 전체에 정보를 공유할 수 있는 수단이다. props로 전달하지 않는다는 것은 props drilling을 피할 수 있는 장점인 동시에 상태가 숨겨져 코드를 직관적으로 알아보기 힘들다는 단점을 의미한다. props를 넘겨주는 것은 단순히 …

React 프로젝트에 이미지를 사이즈 생각 안하고 넣었더니 로드하는 데 시간이 오래 걸려 이미지 사이즈를 최적화했다. 이미지 사이즈 줄이기 이미지 크기가 너무 크면 로드하는 데 시간이 걸리고 이미지 크기가 너무 작다면 화질이 저하된다. 그렇다면 이미지는 어느 정도 크기여야 적당할까? 나는 다음 말에 설득되어 이미지가 화면에서 차지하는 픽셀의 두 배 정도 크기로 이미지 사이즈를 조절했다. 단순히 화면에 표시되는 사이즈로 만들어야 한다고 생각할 수 있습니다. 물론 틀린 말은 아닙니다. 하지만 요즘 사용되는 레티나 디스플레이는 같은 공간(픽셀)에 더 많은 픽셀을 그릴 수 있기 때문에, 너비 기준으로 두 배 정도 큰 이미지를 사용하는 것이 적절합니다. - 프론트엔드 성능 최적화 가이드, 유동근 지음 화면에서 최대 너비 384px, 높이 240px로 표시되는 이미지라면 원본 이미지 사이즈를 너비 768px, 높이 480px 정도 되도록 줄였다. 이미지 화질이 그렇게 중요하지 않은 프로젝트라…

React 프로젝트를 최적화하는 방법 중 코드 분할과 지연 로딩에 대해 알게 되었다. 💡 코드 분할(Code splitting)이란? 하나의 빌드 파일을 한 번에 다운로드하는 대신 여러 파일로 분할해 필요할 때만 다운로드하는 것이다. 초기 리소스 다운로드 시간을 줄일 수 있다. 불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드되는 것이 중요하다. 💡 지연 로딩(Lazy loading)이란? 처음 페이지가 로드될 때가 아닌, 사용자가 서비스를 이용하는 중 해당 코드가 필요해지는 시점에 분할되어 있던 코드가 로드되어 실행되는 것이다. 처음에 한 번에 로드되지 않고 지연되었다가 로드되므로 지연 로딩이다. 따로 코드 분할하지 않으면 통합된 하나의 빌드 파일을 가지게 되는데, 그러면 처음 페이지에 접속할 때 그 통합된 빌드 파일을 로드하기 때문에 당장 필요하지 않은 코드까지도 로드하게 된다. 내 투두리스트 프로젝트에서도 투두리스트 페이지에 들어가든, 로그인…