지난 프로젝트에서 API를 활용했던 부분을 정리하려고 한다. 리액트 환경에서 네이버 지도 API를 불러와서 보여주고몇몇 좌표에 마커를 찍어 보여주는 기능을 개발했다. 일단 네이버 지도를 불러오는 기본 코드는 NAVER Maps API v3NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.navermaps.github.io공식 사이트에 나와있는 예시 코드를 참고했다. 내 코드import React, { useEffect, useRef } from 'react';import regions from '../data/regions';/* global naver */const NaverMap = () => { const mapElement = us..

1. State와 Lifecycle의 정의State(상태): 리액트 컴포넌트의 변경 가능한 데이터, javascript 객체렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함그렇지 않으면 불필요한 렌더링이 되어 성능이 저하될 수 있기 때문(관련 없는 값은 컴포넌트의 인스턴스 필드로 정의하면 됨)class LikeButton extends React.Component { constructor(props) { super(props); // 생성자 this.state = { liked: false }; ... }}state는 직접 수정할 수 없음 (하면 안됨)// state를 직접 수정 (잘..

1. Components와 Props의 정의Components리액트는 모든 페이지가 컴포넌트로 이루어져있고, 하나의 컴포넌트 또한 여러 컴포넌트를 조합하여 만들 수 있음어떠한 속성들을 input으로 받아서 그 속성에 맞는 React elementf를 반환함(React element는 가장 작은 빌딩 블록, 화면에 보이는 것을 기술함)Component와 Element의 관계는 Class와 Instance 개념과 유사함 Props컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체Component의 속성 e.g. Componenet가 붕어빵 틀이라면, Props는 속재료 2. Props의 특징Read-Only -> 값을 변경할 수 없다.컴포넌트를 엘리먼트로 변환하는 과정에서 속성이 변화한다면, 제대로..

1. Elements 의 정의와 생김새Elements의 정의the smallest building blocks기존 웹 개발에서 말하는 엘리먼트는 DOM Elements이다.화면에 나타나는 내용을 기술하는 자바스크립트 객체가 필요했음-> 처음에는 Drscriptor라고 부름하지만 최종적으로 나타나는 모습은 DOM Elements였기 때문에 Elements 라고 부르게 됨실제 브라우저의 돔에 들어있는 요소가 DOM Elements이고 리액트 가상 돔에 들어있는 것이 React Elements이다.결국 리액트 엘리먼트는 돔 엘리먼트의 가상 표현이 되는 것이고, 그렇기 때문에 리액트 엘리먼트에 비해 돔 엘리먼트가 더 많은 정보가 들어있고, 상대적으로 무겁다.--> 앞으로 엘리먼트는 리액트 엘리먼트를 말함 Ele..