React11 리액트의 페이지 라우팅과 react-router-dom v6 활용 1. 페이지 라우팅(page-routing)의 개념 먼저 라우팅(routing)이란 뭘까요? 검색을 하면 '어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정'이라 나옵니다. 말이 어렵죠 쉽게 말해서 데이터를 보낼건데 그 데이터는 한 방에 목적지로 가지 않습니다.여기저기 들려서 전해집니다.그 여기저기 경로를 선택하는 과정이라 생각하면 됩니다. 그래서 라우터(router)란 실시간으로 데이터들이 어디로 가야될지 알려주는 길잡이라 할 수 있고 따라서 라우팅(routing)이란 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말입니다. 리액트에서 페이지 라우팅은 다양한 화면 간 전환이 가능하도록 도와주는 핵심 개념입니다. 단순히 어떤 요청에 따라서 어떤 페이지를 돌려줄지 결정하.. 2024. 1. 15. 리액트의 SPA와 CSR 방식 리액트는 기본적으로 페이지 이동과 관련해서 SPA와 CSR 방식을 사용합니다. 이 글에서는 리액트에서 사용하는 SPA와 CSR 방식이 무엇인지 알아보겠습니다. 그 전에 MPA 방식과의 비교를 위해 MPA 방식을 먼저 소개하겠습니다. 1. MPA (Multi-Page Application) MPA(Multi-Page Application)는 다중 페이지 애플리케이션을 의미하며, 전통적인 웹 애플리케이션 구조입니다. 각 페이지는 서버로부터 새로운 HTML을 받아와 전체 페이지를 다시 로드하는 방식으로 동작합니다. 즉, 여러 개의 페이지(HTML)를 준비해놨다가 요청이 들어오면 그 요청 경로에 따라 적절한 페이지를 보내주는 방식입니다. 따라서 각각이 새로운 요청이기 때문에 화면이 새로고침처럼 바뀌게 됩니다. .. 2024. 1. 15. 리액트의 useReducer: 컴포넌트에서 상태변화 로직을 분리 소개 리액트에서 상태 관리는 핵심적인 부분 중 하나입니다. useState 훅을 통해 간단한 상태를 다루는 것도 좋지만, 복잡한 로직이나 여러 상태를 관리해야 하는 경우 useReducer 훅이 더 강력한 도구로 작용합니다. 이 글에서는 useReducer의 개념, 사용법, 그리고 실제 활용에 대해 간단히 알아보겠습니다. 1. useReducer란? useReducer는 리액트에서 제공하는 특별한 훅으로, 상태와 액션을 사용하여 새로운 상태를 계산하는 함수입니다. 이를 통해 복잡한 상태 로직을 효과적으로 다룰 수 있습니다. 기본적인 사용법은 다음과 같습니다. const [state, dispatch] = useReducer(reducer, initialState); 여기서 reducer는 상태를 어떻게 .. 2024. 1. 3. 리액트의 React.memo: 성능 최적화(컴포넌트 재사용) 소개 리액트에서 컴포넌트의 성능 최적화는 항상 중요한 고려사항 중 하나입니다. React.memo는 함수형 컴포넌트의 성능을 향상시키기 위한 효과적인 방법 중 하나로, 이 글에서는 React.memo의 개념, 사용법, 그리고 주의사항에 대해 간단히 알아보겠습니다. 1. React.memo란? React.memo는 리액트에서 제공하는 특별한 고차 컴포넌트로, 컴포넌트의 랜더링 결과를 메모이제이션(Memoization)하여 성능을 최적화하는 역할을 합니다. 이를 통해 랜더링이 불필요하게 발생하지 않아 성능 향상이 기대됩니다. 기본적인 사용법은 다음과 같습니다. const MemoizedComponent = React.memo(MyComponent); 위 코드에서 MyComponent는 React.memo에 .. 2024. 1. 2. 이전 1 2 3 다음 반응형
