Context API 작은 규모의 프로젝트에서 사용하면 좋은 React Hook Context 사용 방법 1. Context 만들기 createContext(기본값) - Provider가 없는 경우 사용할 default 값(initial X) // LevelContext.js import { createContext } from 'react'; export const LevelContext = createContext(1); 2. Context 제공하기 만들어놓은 Context.provider로 Context를 전달하고 싶은 자식 요소 감싸기 → 트리에 동일한 Context가 여럿 있을 때 자식 요소는 UI 트리에서 가장 가까운 Context 값을 사용 import { LevelContext } from..
atom, selector로 상태를 정의하고 useRecoilState 등으로 불러와서 사용 상태 정의 atom 기본적인 상태 단위 key: 상태를 구분할 특수한 값 default: 초기값 const fontSizeState = atom ({ key: 'fontSizeState', default: 초기값 }) ... const [fontSize, setFontSize] = useRecoilState(fontSizeState); effects: 부수 효과. localStorage 저장이 필요한 경우 사용 setSelf: 로컬 키를 불러와서 상태로 저장하는 함수 onSet: 상태 변경 시 실행될 함수 newValue: 새 상태 oldValue: 기존 상태 isReset: 초기화 여부(set함수로 defaul..
리듀서 내부에서 같은 슬라이스의 다른 리듀서 사용하기 // 슬라이스명.caseReducers.리듀서명(인자) // state를 사용해야한다면 인자로 state를 전달해주어야 함 customSlice.caseReducers.updateInfo(custom, product, true); 리듀서 내부에서 콘솔 출력했는데 proxy로 나오는 경우, current로 감싸서 확인하기 import { current } from '@reduxjs/toolkit'; ... reducers: { updateInfo: (state, action) => { console.log(current('내용')) }, } * 참고 caseReducers current 2023.04.19
1. 빌드 난독화 2. 특정 경로 바로 접근 시 나타나는 404 → index.html로 대체하기 3. 페이지 주소 설정 4. react-router-dom basename 설정 5. 배포용 브랜치 생성 후 빌드 폴더만 푸시하기 # package.json "scripts": { "build": "GENERATE_SOURCEMAP=false react-scripts build", #1 "postbuild": "cp build/index.html build/404.html", #2 }, "homepage": "https://myusername.github.io/my-app", #3 // react-router-dom을 사용하는 경우 router에 basename 추가 #4 import { Route, cre..
이미지 파일 미리보기 1. 인풋 요소(type="file")에서 파일이 첨부되면(onInput 이벤트) imgInput 상태에 저장시키면 2. 리렌더링으로 인해 useEffect 실행 - 파일이 있으면 파일을 FileReader의 readAsDataURL 메서드로 base64로 만든 후 imgInputBuffer에 저장 - 파일이 없으면 imgInputBuffer를 비워줌 3. imgInputBuffer를 원하는 태그에 할당해줌 - img면 src - 다른 태그면 background 속성 const [imgInput, setImgInput] = useState(null); const [imgInputBuffer, setImgInputBuffer] = useState(null); useEffect(() =..
코드 분할(Code Spliting) 모던 웹으로 발전하면서 JavaScript 코드가 방대해지고 무거워짐을 개선하기 위해 런타임 시 여러 번들을 동적으로 만들고 불러오는 것 당장 필요한 코드가 아니면 따로 분리시키고, 필요할 때 불러와서 사용 -> 대규모 프로젝트 앱의 경우에도 페이지 로딩 속도를 개선할 수 있음 번들 분할, 줄이는 법 서드 파티 라이브러리(플러그인, 라이브러리, 프레임워크)는 다양한 메서드를 제공하기 때문에 코드 양이 많아 번들링 시 많은 공간을 차지함 -> 라이브러리를 전부 불러와 사용하지 말고, 필요한 것만 불러와 사용하는 것이 성능 개선에 좋음 // 라이브러리 전부 불러오기 import _ from 'lodash'; _.find([]); // 필요한 메서드만 불러오기 import..
[React] 상태 관리
상태(state): UI에 동적으로 표현될 데이터 Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 - Side Effect를 최대한 배제하고 컴포넌트를 만들어야 함 (API요청 없이도 컴포넌트가 작동하도록 로딩 화면 구현 = presentation표현 컴포넌트) 상태를 구분하는데 절대적인 기준이나 법칙이 있는 것은 아님 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태 ex) 다른 컴포넌트와 데이터를 공유하지 않는 form폼 데이터(input box, select box 등) 전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 ex) 테마(다크모드), 국제화(Globalization, 사용자 언어), 포토샵/일러스트의 히스토리 기능과 Undo/Red..