반응형 개발/React52 리액트에서 카카오 맵 api 사용하는 법 아래 과정은 당연히 진행했다고 생각하고 그 다음을 이야기하겠다. 1. index.html에 라이브러리 추가. 1. 리액트의 public폴더안의 index.html에 들어간다. 2. 헤더 안에 카카오 공식문서에서 소개하는 태그를 삽입한다. API_KEY 는 .env안에 있는 데이터를 사용한다. 리액트안에서 사용하는 .env데이터는 꼭 REACT_APP_를 붙혀야 한다. 3. 라이브러리를 추가한다. 난 그냥 세개 다 붙혔다. 2. Sample데이터를 리액트형식에 맞게 작성한다. 이건 내가 사용한 코드이다. 본인이 구현하려는 코드에 맞게 샘플에 있는 JS,HTML 코드를 변형하여 작성한다. import React, { useEffect } from 'react'; import { useSelector,shal.. 2021. 11. 19. Code Splitting - dynamic import, React.lazy(), Suspense Code Splitting 유저의 브라우저가 파싱하는 웹페이지의 규모가 클 때, 로딩이 오래걸리지 않도록 하기 위해 개발자는 당장 필요한 정보를 우선순위로 로딩순서를 조정할 수 있다. 이를 잘 활용하면 아직 로딩중인 홈페이지더라도 티가 나지 않게 하여 좋은 UX(user experience)를 전달할 수 있다. import() 구문 이용 만약 add함수의 크기가 방대해서 import하는데 오래걸린다면 add함수를 사용하기 전까지는 add를 import하지 않는것이 좋다. 사용 방법은 import를 함수형태로 사용한 후 돌아오는 promise에서 모듈을 실행하는 방식이다. 전 import { add } from './math'; console.log(add(2,3)) 후 import('./math').th.. 2021. 11. 5. Virtual Dom, DOM조작횟수를 줄여서 리렌더링을 줄여보자! Virtual Dom 요약 : 여러번 렌더링할것을 한번에 렌더링한다. SPA로 인해 DOM 복잡도가 증가하고 최적화, 유지보수가 어려워졌다. DOM을 반복 조작할수록 렌더링횟수가 늘어나고, PC 리소스 소모가 많아진다. => DOM 조작횟수를 줄여보자! 이러한 문제점의 해결방안으로 Virtual DOM 이 등장하였다. Virtual Dom의 작동방식을 소개하기에 앞서 브라우저에서의 렌더링 순서를 간략하게 살펴보자. 브라우저의 렌더링 순서 1. HTML을 파싱하여 DOM 트리가 생성되고, CSS를 파싱하여 스타일 규칙이 생성된다. 2. 새로운 렌더트리가 생성된다. 3. 레이아웃과정을 거친다. 레이아웃 과정에서는 각 노드들이 위치해야할 화면의 좌표가 주어진다. 4. 그리기(Painting) : 트리의 각 노.. 2021. 11. 4. 컴포넌트 최적화 : React.memo(), useSelector(callback,equalityFn) 새로 알게 된 것 : 컴포넌트 최적화 React.memo 컴퍼넌트가 React.memo()로 래핑될때 React는 컴퍼넌트를 렌더링하고 결과를 메모이징한다. 그 다음 렌더링의 결과가 이전과 같다면 React는 메모이징 이전 내용을 제시한다. 같은 props로 렌더링이 자주 일어나는 컴퍼넌트 에서는 React.memo를 사용하는 것이 더 좋은 성능을 나타낸다.(불필요한 리렌더링을 줄인다.) 다음을 보자. TodoItem 컴퍼넌트를 다음과 같이 정의한다. function TodoItem({ todo, onToggle }){ return ( onToggle(todo.id)} > {todo.text} ); } 위 영상에서 보다시피 기존에 렌더링되어 있던 TodoItem컴퍼넌트들도 계속 렌더링된다. 이번엔 Tod.. 2021. 10. 17. 이전 1 ··· 9 10 11 12 13 다음 반응형
