프론트엔드/React(코딩애플)31 React, async sync / async 관련 상식 JS는 synchronous(동기방식)하게, 즉 순서대로 코드가 실행됨 문제는 JS는 몇몇 함수(ajax, 이벤트리스너, setTimeout 등)를 사용하면 asynchronous(비동기적)하게 코드가 실행됨 이런 함수들은 처리시간이 오래걸리기 때문에 코드들이 순차적으로 실행되지 않고 완료되면 실행됨 ajax등의 요청이 0.00초가 걸려도 물리적으로 처리가 보류되어 나중에 실행되는것 리액트의 setState 함수에 주의해야 하는 점 function App(){ let [name, setName] = useState('Lee') } setName() 같은 state 변경함수들은 전부 asynchronous (비동기적)으로 처리됨 state 변경함수가 오래 걸리면 다른 밑에.. 2023. 3. 30. React, PWA PWA Progressive Web App 줄여서 PWA 웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술 React를 이용해 만든 웹사이트를 모바일 앱으로 발행해서 쓰자는 의도 다만 iOS, Android 앱으로 발행하는게 아니라 웹사이트 자체를 스마트폰 홈화면에 설치하는 것 PWA 장점 스마트폰, 태블릿 바탕화면에 웹사이트를 설치 가능 다운받은 앱을 누르면 상단URL바가 제거된 크롬 브라우저가 떠서 일반 사용자는 앱이랑 구분X 오프라인에서도 동작할 수 있음 service-worker.js 라는 파일과 브라우저의 Cache storage로 오프라인에서도 동작할 수 있음 덕분에 게임만들 때 유용 설치 유도 비용이 매우 적음 앱설치를 유도하는 마케팅 비용이 적게들어감 앱.. 2023. 3. 30. React, batching과 useTransition 그리고 useDeferredValue(성능개선) 일관된 batching 리액트 18버전부터 일관된 batching을 지원 automatic batching 이라는 기능이 있는데 state변경함수를 연달아서 여러개 사용하면 재렌더링도 여러개되어야 하지만 리액트는 재렌더링을 마지막에 1회만 처리 이렇게 일종의 쓸데없는 재렌더링 방지기능을 batching이라고 함 setName("HE") setAge(19) setCount(0) 리액트 17버전까지는 ajax요청, setTimeout 등등의 안에 있는 state변경함수가 있는 경우 batching이 일어나지 않았지만 리액트18버전부터는 일관적이게 어디있든간 재렌더링이 마지막 1번만 됨 만약 automatic batching을 원하지 않는 경우 flushsync()을 이용 flushsync()는 비동기적인 코.. 2023. 3. 28. React, 재렌더링을 막는 memo, useMemo(성능개선) memo 컴포넌트가 재렌더링되면 안에 있는 자식컴포넌트는 항상 함께 재렌더링됨 이런경우 자식컴포넌트가 무겁다면 부모컴포넌트가 재렌더링될 시 렌더링시간이 긴 문제가 될 수 있음 예시로 부모컴포넌트에 버튼을 누를때마다 렌더링으로 인해 1초마다 버벅거리는 불상사가 벌어질수도 있는것 import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링됨') return Child }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } 상단에 memo를 import 원하는 컴포넌트 정의부분을 감싸기 컴포넌트를 감쌀때는 .. 2023. 3. 23. React, React Develop Tools과 lazy import(성능개선) React Developer Tools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 1a88fbb67 on 2/16/2023. chrome.google.com 크롬 웹스토어로 크롬 확장프로그램 설치가 가능함 React Developer Tools 설치하면 개발자 도구에 Components 탭이 생기는데 개발중인 리액트사이트를 컴포넌트로 미리볼 수 있음 Components 탭에서 컴포넌트구조 파악을 .. 2023. 3. 21. React, react-query react-query ajax 요청하다보면 여러기능이 필요할때가 있음 몇초마다 자동으로 데이터 다시 가져오게 하려면? 요청실패시 몇초 간격으로 재시도를 하게 할것인지? 다음 페이지 미리 가져오게 할려면? ajax 성공/실패시 각각 다른 html을 보여주려면? 직접 개발해도 되지만 react-query 라이브러리를 설치해서 써도 됨 react-query는 server-state(DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와주기때문에 SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트에서 쓰면 유용하지만 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 비효율적일 수 있음 그렇기에 react-query는 ajax 관련 기능개발 편하게 할 수 있는데에 의의가 있음 react-query .. 2023. 3. 21. React, localStorage localStorage 새로고침하면 모든 state 데이터는 리셋됨 새로고침을 하면 브라우저는 Html, CSS, JS 파일들을 처음부터 다시 읽기 때문 리셋되는것을 원하지 않는다면 state 데이터를 서버로 보내서 DB에 저장하면 됨 서버나 DB 지식이 없다면 localStorage를 이용해도 됨 유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간 Local Storage는 브라우저를 청소하지 않는 이상 반영구적으로 Session Storage는 브라우저를 끄면 삭제됨 key: value 형태로 저장 사이트마다 5MB 정도의 문자 데이터를 저장할 수 있음 localStorage문법 localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이.. 2023. 3. 19. React, Redux state가 object/array일 경우 변경 Redux state가 object/array일 경우 변경 let user = createSlice({ name : 'user', initialState : {name : 'Lee', age : 20}, reducers : { changeName(state){ state.name = 'park' } } }) array, object 자료의 경우 state변경은 state를 직접 수정 직접 수정해도 잘 변경되는 이유는 Immer.js 라이브러리가 state 사본을 하나 더 생성해주기 때문인데 Redux 설치하면 Immer.js 라이브러리가 같이 설치됨 비슷한 state 변경함수가 여러개 필요할 경우 파라미터 문법 이용 let user = createSlice({ name : 'user', initialSt.. 2023. 3. 17. React, Redux store의 state 변경 Redux store의 state 변경 Redux의 state변경은 state의 수정해주는 함수를 만들고 원할 때 그 함수 실행해달라고 요청하는 방식 store.js에 state변경해주는 함수 만들기 export 하기 필요할 때 import 하여 dispatch() 로 감싸서 사용 자세히 살펴보자면 1. store.js에 state변경해주는 함수 만들기 //store.js let user = createSlice({ name : 'user', initialState : 'Lee', reducers : { changeName(state){ return 'john ' + state } } }) slice 안에 reducers : { } 열고 거기 안에 함수 만들면 됨 함수 작명은 원하는대로 파라미터 하나 작.. 2023. 3. 16. 이전 1 2 3 4 다음
