programming/React (23) 썸네일형 리스트형 Recoil 새로고침 시 user 데이터 유지하기 로그인시 받는 유저 데이터 recoil state 는 새로고침시 날아감 새로고침시 마다 유저 정보를 API 요청 → XXXXXX recoil state 를 persist localStorage를 사용하는 방법이 있음 새로고침시 localStorage에 저장해둔 값을 state에 다시 입력 localStorageEffect.js function localStorageEffect(key) { return ({ setSelf, onSet }) => { const savedValue = localStorage.getItem(key); if (savedValue != null) { setSelf(JSON.parse(savedValue)); } else { // 로컬 스토리지에 저장된 값이 없으면 로그아웃 처리 l.. 리액트 빌드시 환경(개발/테스트/상용)에 따라 API 주소 설정하기 1. 명령어로 구분 package.json에 script : start/build/test 각각의 스크립트가 있음 -> 배포시 build.gradle에 npm build 명령어가 들어있음 2. .env 파일에서 환경변수 사용 두개의 분리된 dotEnv 파일 생성 .env.development : 개발용 환경변수 .env.production : 상용 환경변수 원리) Creact-React-App으로 리액트를 만들고 npm 스크립트를 실행할 때 스크립트 명령어별로 env 파일의 적용 우선순위가 있다. script 명령어 별 env 파일 우선순위 npm start : .env.development.local, .env.local, .env.development, .env npm build : .env.prod.. [React] react-router-dom으로 레이아웃 구현, 네비게이션 바로 라우팅 구현, useParams로 파라미터 받 TODO Router 아무 path 없을 때는 layout 구현, 그 안에 Route 구현 notFound 페이지 예외 처리 예정 Layout 에서 NavLink로 링크 구현 Outlet으로 랜더할 내용 받아줌 useParams로 parameter 받기 1. 사용할 페이지 간략 내용 views들 생성 /views/About.js /views/About.js /views/NotFound.js /views/UserDetail.js /views/Users.js Layout은 조금 이따가 2. 레이아웃 담당할 Layout.js 작성 react-router-dom이 제공하는 NavLink, Outlet 사용 NavLink는 a태그 역할 링크 역할 Outlet은 Content가 담길 곳 명시하는 것 (react-r.. 이전 1 2 3 다음
