React3 CSR(Client-side Rendering)이란? (+SSR 비교) 🤔 CSR(Client-side Rendering)이란? Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식이다. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 된다. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 된다. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있다. 😎 장점 ✅ 인터랙션 향상 CSR은 사용자 경험(UX) 측면에서 이점을 가지고 있다. 페이지의 동작에 따라 실시간으로 콘텐츠가 변경되어 사용자가 웹사이트를 더 쉽게 이용할 수 있다. 예를 들면, 기존 웹에서 페.. 2023. 6. 28. [React] useCallback 사용법 정리 👩💻 이 글을 쓰게 된 계기... React는 Virtual DOM을 사용하여 컴포넌트의 렌더링 성능을 최적화한다. 그러나 불필요한 렌더링이 발생할 수 있는 상황이 있다. 이러한 상황에서는 React의 useCallback 훅을 사용하여 함수를 재사용하면 성능을 향상시킬 수 있다고 하는데 정확히 어떤 상황에서 써야 이게 잘 썼는지 소문이 날까? 란 생각에 정리해 보았다. 👁🗨 useCallback을 사용해야 하는 경우 일단 이론적으로 React에서 useCallback을 사용해야 하는 경우는 다음과 같다. ✅ 이벤트 핸들러 함수가 자주 재생성되는 경우 useCallback을 사용하지 않으면 이벤트 핸들러 함수는 매번 새로운 인스턴스가 생성된다. 그러나 useCallback을 사용하면 함수가 처음 생성.. 2023. 4. 28. [React] Redux 와 Context-API의 비교, 사용 사례 및 코드 예시 리덕스(Redux)와 컨텍스트 API(Context API)는 리액트(React) 애플리케이션에서 상태 관리를 하기 위한 두 가지 대안적인 방법이다. 하지만 유사한 점들이 많다보니, 처음 봤을 때 어느 때에 더 적절한걸 써야 할지 몰라 Redux와 Context API를 비교하고, 각각의 사용 사례와 코드 예시를 기록하려 한다. 🤔 Redux vs. Context API Redux는 Flux 아키텍처 패턴을 구현한 라이브러리로, 전역 상태 관리를 위해 사용된다. Redux는 애플리케이션의 상태를 중앙 집중적으로 관리하고, 상태 변경을 예측 가능하도록 만든다. 이를 위해 Redux는 불변성을 유지하고, 상태 변경을 위한 액션(Action)을 사용하며, 이 액션들을 통해 상태를 변경하는 리듀서(Reducer.. 2023. 4. 5. 이전 1 다음
