본문 바로가기

전체 글

 (40)
[React] router loader, useNavigation loader() 사용 loader() 사용 전import { useEffect, useState } from 'react';import EventsList from '../components/EventsList';function EventsPage() { const [isLoading, setIsLoading] = useState(false); const [fetchedEvents, setFetchedEvents] = useState(); const [error, setError] = useState(); useEffect(() => { async function fetchEvents() { setIsLoading(true); const res..
[React] router 멀티페이지 어플리케이션 단점 > 항상 새 콘텐츠를 가져와야 함 > 새로운 HTTP 요청을 전송하고 새로운 응답을 받는 과정에서 사용자의 흐름이 중단될 수도 있음 > 지연이 발생할 수 있음 > 사용자 경험 저하 > 복잡한 사용자 인터페이스 구축 시 싱글 페이지 어플리케이션 사용 SPA > 최초 HTML 요청 하나만 전송 > HTML 파일과 추가적인 JS 다운로드 되고 클라이언트에서 실행되는 추가 JS 코드는 사용자가 화면에서 보는 것들을 실제로 조절 SPA에서 라우팅사용 > 클라이언트 측에 리액트 코드 추가 가능하고 이것이 사용중이 URL을 감시 URL 이 변경될 떄마다 작동하여 URL 이 변경되면 화면에 다른 콘텐츠를 표시하게 됨 > 백엔드로부터 새 HTML 파일을 로딩하지 않고 약간의 클라이언트 측 코..
[React] Redux 리덕스 정의 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소 - 하나에 모든 데이터 상태 저장 *** 로컬 상태 : 하나의 컴포넌트에 연관된 상태값 크로스 컴포넌트 상태 : 다수의 컴포넌트에 미치는 상태값 (ex) Modal 여닫는 상태값, prop drilling prop chains 로 구현) 앱와이드상태 : 전체 앱에 영향을 주는 상태 ex) 사용자 인증, prop drilling prop chains 로 구현) 규칙 순수 함수 동기식 이어야 하며 부수 효과가 없어야 함(리듀서 안에서 부수효과 사용 불가) 리덕스 VS 리액트 컨텍스트 리액트 컨텍스트 단점 - 설정 복잡, 관리 복잡, 대형 애플리케이션에서 구축할 경우 중첩된 JSX ..

티스토리툴바