본문 바로가기

Web/React, Redux2

[React] React routing 라우팅 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스 렌더링 해당 페이지를 UI에 배치하는 프로세스 특정 페이지에 대한 경로를 요청할 때마다 해당 페이지도 렌더링되지만 모든 렌더링이 경로의 결과인 것은 아닙니다 클라이언트 사이드 라우팅 클라이언트 사이드 라우팅이란 서버에게 별다른 요청을 보내지 않고 클라이언트의 브라우저 단에서만 여러 페이지들을 왔다 갔다 방문할 수 있는 기능을 말한다 클라이언트 라우팅의 구현에 중요한 핵심 3가지 1. 현재 URL에 맞는 UI(즉, 컴포넌트)를 렌더링 할 수 있어야 한다 2. 페이지의 리로드 없이 다른 페이지를 방문할 수 있는 네비게이션 기능이 있어야 한다 3. 사용자의 액션에 의해 URL이 변경될 때 이를 감지하고 처리할 수 있어야 한다 React 웹 애플리케이션.. 2021. 7. 14.
[Redux] 사용했을때 장점 일반적인 웹, 앱에서 데이터를 활용하는 방식 1. 데이터를 가져옴 (fetch) 2. 저장 (store) 3. UI 구현 4. 데이터 변경 서버로 부터 가져온 데이터를 표현하고 사용자 액션에 따라 적절히 업데이트 시켜주는 것 위와 같이 데이터를 활용하기 위해 React만으로도 충분합니다. React의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 레이아웃 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 됩니다. 그러다 부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트들은 변화된 상태에 맞게 data 혹은 UI를 변경합니다. 컴포넌트들은 다음과 같은 몇 가지 상황에서 리랜더링 됩니다 1. 자신의 상태(state)값이 변경될 때 2. 부모 컴포넌트가 리랜더링될 때 3. 자신.. 2021. 6. 21.