🍓𝗪𝗲𝗯
-
Local Storage 사용하기🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 9. 23. 07:00
Local Storage란 개발자도구 Application항목에 Local Storage 있음. 브라우저 청소를 하지 않는 이상 브라우저 닫아도 저장 가능(텍스트 5MB) sessionStorage는 휘발성이다. 문법 1. localStorage.setItem('name', 'kim') 자료저장 Object형으로 자료이름, 자료값 저장 localStorage.setItem('obj', {name: 'kim'}) Object를 그냥 문자로 바꾸면 깨진다. localStorage.setItem(arr,[1, 2, 3]) array를 저장했지만 출력할 때 1, 2, 3이 나온다. 즉, 자료형이 깨진다. array와 Object 자료형 손실없이 저장하려면 글자인척하면서 저장하면된다. " " 를 사용한다. => ..
-
[React] PWA란?🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 21:55
PWA 웹사이트를 모바일앱처럼 설치해서 쓸 수 있음 PWA 장점 - 설치 마케팅 비용 적음 (앱스토어 마케팅 X) - html , css ,js만으로 앱처럼! 처음에 PWA가 셋팅된 리액트 프로젝트를 생성해야 한다. 터미널에 다음 명령어를 친다. npx create-react-app 프로젝트명 --template cra-template-pwa 기존 프로젝트를 PWA로는 만들지 못한다... ㅠㅠ 처음 생성할 때 저렇게 해야 한다. 그냥 새 PWA 플젝 만들고 기존 코드를 복붙한다. 필요한 라이브러리도 설치한다. 아래 2개의 파일을 수정한다. 1. manifest.json 앱설정파일 생성 (public폴더 아래 ) 앱이름, 이미지 등등 설정할 수 있다. 2. service-worker.js 오프라인에서도 사..
-
[React] lazy loading / React devtools / 쓸데없는 재렌더링 막는 방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 21:35
1. 익명함수로 쓰지말고, 함수나 object는 선언해서 쓰는 것이 좋다. 이렇게 이름지어서 넣는 것이 좋은 이유는 메모리 할당 때문이다! 콜백함수나 이름없는 Object는 메모리 할당에 성능문제가 생길 수 있다. 2. 애니메이션 줄 때, 레이아웃 변경하는 애니메이션은 브라우저가 힘들어한다.(css상식) margin, width, padding과 같이 레이아웃 잡는 속성 말고, transform이나 opacity 사용 추천! 3. App.js에서 컴포넌트 import할 때 lazy loading을 하자! Javascript는 위에서부터 읽어오는데, 컴포넌트 Import 많이 하고 다 하면서 오면 부담이 될 수 있다. 따라서 필요할 때 import하게끔 하면된다. import {lazy, Suspense}..
-
[React] setState 함수 특징🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 20:50
state 만들때 다음과 같은 방식을 사용하는데, state 변경함수들은 전부 비동기적으로 처리된다. function App() { let [name, setName] = useState('kim'); } 따라서 setName()과 같은 state변경함수가 오래걸리면, 일단 이걸 놔두고 다른 밑에 있는 코드들부터 실행하여 예기치 못한 문제가 발생할 수 있다. 이런 문제를 해결하여, 동기적으로 (순차적으로) 실행하고 싶으면 useEffect를 사용하면된다. 특정 state가 변경될 때 useEffect를 실행할 수 있다. useEffect는 컴포넌트가 렌더링/재렌더링될 때 실행되는 함수이다. useEffect(() => { }, [state명]) state가 변경되면 이 코드 실행해달라는 뜻으로 사용가능하..
-
[Redux] useSelector, useDispatch🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 16:30
redux를 쓰는 이유 - 모든 컴포넌트가 props 없이 state 직접 사용이 가능하다. - state관리가 용이하다. (reducer로 수정방법을 정의해놓고, dispatch로 수정을 요청하기 때문에, state 에러 추적 용이) state 꺼내쓰는 더 쉬운 방법 : useSelector() 기존방법 const convertStoreDataToProps = (state) => { // redux store 데이터 props로 변환 return { state: state.reducer, // state 데이터를 state라는 이름의 props로 바꾸기 alertState: state.alertReducer } } export default connect(convertStoreDataToProps)(C..
-
[Redux] dispatch할 때 데이터 실어보내기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 15:35
방법 dispatch({type: 어쩌구, payload: 보낼데이터}) 보낸 자료는 액션파라미터에 저장되어 있다. 상품상세화면에서 주문하기 버튼을 누르면, 해당 제품이 장바구니에 포함되도록 하려면? -> dispatch할 때 같이 데이터를 보낸다. state를 props화 해주는 것을 써야 dispatch도 가능하다. (+ connect함수도 import해와야한다) reducer의 action 파라미터는 dispatch할 때 보낸 object이다. 같은 상품이 이미 있으면 수량만 증가시키는 기능 임시상품명말고 실제 상품명데이터를 redux에 저장하는 기능
-
[Redux] state와 reducer가 더 필요한 상황에서 접근 방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 11:05
다른 정보도 state로 만들고 싶다면? 변수를 만들어서, reducer 함수에 기본값으로 전달하는 것은 동일하고, createStore에 넣을 때 주의해야한다. let store = createStore(combineReducers({reducer, reducer2})); combineReducers를 이용해 object 자료형으로 넣어준다. combineReducers는 상단에 import해와야 한다. import { createStore, combineReducers} from 'redux'; reducer를 몇개 합치면 store 데이터 뽑아쓸 때 주의해야한다. redux store에 온갖 데이터 저장을 하지 않는다는 것이 중요하다! 공통으로 사용되는 데이터를 저장해야한다. 컴포넌트 하나에서만 쓰..
-
[Redux] Reducer 셋팅법, dispatch로 데이터 수정방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 00:44
Reducer 셋팅법 let defaultState = [ { id: 0, name: 'White and Black', quantity: 2 }, { id: 2, name: 'Grey Yordan', quantity: 5 }, { id: 3, name: 'Flowey', quantity: 3 } ]; const reducer = (state = defaultState, action) => { if() { return 수정된 state } else { return state } } let store = createStore(reducer); 이런 식으로 앞에 코드를 변경해준다. Reducer는 수정된 state를 뱉어주는 함수이다. 인자에 값을 입력하지 않으면 ,default 값을 줄 수 있도록 state..