🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍
-
[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..
-
[Redux] redux 용도 및 설치방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 21. 23:12
Redux는 Context API와 비슷한 역할을 하며, 복잡한 하위컴포넌트를 만들 때 props 전송없이 바로 state 데이터 접근해서 사용할 수 있다. props전송없이도 모든 컴포넌트들이 state 사용할 수 있게 해준다. redux 용도 1. props 전송귀찮아서! 깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 가져다가 쓸 수 있다. 컴포넌트 많은 사이트에서 편리하다! 2. 데이터 관리 용이 redux에서는 state 데이터의 수정방법을 미리 정의한다. 설치방법 1. yarn add redux react-redux 2. index.js에 다음 명령어 설치 import {Provider} from 'react-redux'; 3. 로 감싸기 Provider로 감싼 모든 컴포넌트..