반응형 개발/React54 리액트에서 map을 이용한 렌더링을 할 때 key에 대해 알아야 할 내용, index는 지양하자. Key를 할당하지 않았을때 나오는 경고 function CommentTemplate({ commentDummy, contentId }) { return ( {commentDummy.map((comment) => { return ( //아래와 같이 key를 할당해야 하는 이유 ); })} ); } 위의 코드는 map메소드를 이용하여 배열의 요소를 HTML엘리먼트로 매핑한 모습이다. 만약 key를 할당하지 않는다면, 그러니까 다음과 같이 작성하면 다음과 같은 경고가 발생한다. return ( //아래와 같이 key를 할당하지 않는다. 2021. 12. 31. 리액트 리액트 특징 정리 리액트에서의 데이터는 위에서 아래로만 흐른다. 리액트에서의 데이터 흐름은 트리구조에 의거하여 하향식으로 흐른다. (단방향 흐름이라고도 한다.) 데이터를 전달하는 주체는 부모컴포넌트이다. 부모컴포넌트는 데이터를 props로 자식컴포넌트에게 전달한다. 컴포넌트는 props를 통해 전달받은 데이터의 출처를 알지 못한다. 부모컴포넌트가 자식컴포넌트에게 데이터를 전달하는 '하향식 전달 방식'은 아주 중요하다. 리액트를 대표하는 설명중 하나가 'One way data flow'일 정도이다. State는 최소화할수록 좋다. 또한 모든 데이터를 state로 둘 필요는 없다. 사실 state는 최소화하는 것이 좋다. state 변화가 렌더링을 일으키기 때문이다. state로 저장하지 않아도 되는 것을 .. 2021. 12. 31. 리액트에서 카카오 맵 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. 이전 1 ··· 9 10 11 12 13 14 다음 반응형
