naver map api 예제를 보고 한땀한땀 component를 만들어서 사용해도 되지만, npm 을 뒤적거려보면 react-naver-maps 라는 잘되어있는 모듈을 만날 수 있다. (필요하면 상황에 맞게 수정해서 쓰면 된다.) 설치 npm install react-naver-maps Sample Code (지도 1개만 그릴 때) import React from 'react'; import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps'; function NaverMapComponent() { const id = this.props.itemData.id; return ( ); } function App() { return ( ); }..

PWA - Progressive Web App 브라우저에서 실행되는 Web App을 마치 네이티브 앱처럼 만들어 주는 기술이다. 네이티브 앱"처럼" 이기때문에 네이티브의 기능을 사용할 순 없지만 읽기 속도, 표시 속도, 오프라인에서의 실행 등 이점을 얻을 수 있다. 서비스 형태에 따라 PWA 사이트에 접속한 경우, 바탕화면에 PWA를 설치할까요? 라는 팝업을 띄울 수도 있다. 바탕화면에 설치하게 되면, 다른 네이티브 앱들처럼 새로운 앱이 설치된것마냥 녹아들게 된다. React 앱을 PWA 로 제공해주기 위해서는 몇가지 준비가 필요하다. - PWA 지원 브라우저 - Service Worker - icon 설정 PWA를 지원하는 브라우저마다 동작이 조금씩 다르므로 확인하는 것이 좋다. PWA는 Service..

state를 바꾼다는 것은 화면에 출력할 것 중 변경되는 것이 있다는 것을 의미한다. 그래서 state를 바꾸게되면, render() 함수가 자동으로 호출되어 바뀐 부분만 재빠르게 변경된다. 하지만, 첫번째와 같이 쓰면 state가 변경되지 않고 rerender하지 않는다. 두번째 방법으로 써야 state를 변경하고, render()함수를 호출 하여 원하는 글자를 바꿀 수 있다. this.state.value = 1 // X this.setState({value:1}); // O 가끔 this.state에 있는 값을 참조하여 값을 바꾸는 경우가 있는데, 보통의 경우라면 아래와 같이 쓸 수 있다. plus = () => { this.setState({value: this.state.value + 1}); ..

합성 (Composition) 상속 (Inheritance) React에서는 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는것을 권장한다. 컴포넌트에서 다른 컴포넌트를 담기 다른 튜토리얼에서도 이와 같이 잘 쓰고 있었지만, 다시 확인하는 차원에서 살펴보면 아래와 같다. 이렇게 하나의 컴포넌트 안에서 다른 컴포넌트를 가지고 표기하는 방식이다. 자습서에서 알려주는 예시는 아래와같다. props.children 은 자식 엘리먼트의 내용을 그대로 출력할 수 있는 특수한 prop 이다. 아래의 예시에서는 h1태그와 p 태그에 해당된다. function FancyBorder(props) { return ( {props.children} ); } function WelcomeDialog() { return..

직역을 한것인지 최대한 설명을 하려고 노력한것인지 "state 끌어올리기"라는 말이 와닿지 않았다. 지금까지 공부해본 것을 토대로 생각해보면 state는 현재 Component내에서 바뀔 수 있는 값이다. (어떻게 보면 rerender를 위한 값이다.) 그렇다면 아래와 같이 Custom Component 를 다른 Component에서 호출해서 사용할 경우 값을 어떻게 동기화 시킬까의 문제가 발생한다. ex) 화씨와 섭씨의 값을 하나로 동기화 시켜서 관리하고 싶은 경우 class Calculator extends React.Component { render() { return ( ); } } TemperatureInput Component 내에서 state 를 관리하고 있지만, 이 값을 Calculator..

HTML 을 해보면 폼 자체가 가진 동작(?) 을 사용할때가 있다. 예를 들어, 같은 태그를 사용하게되면, 속성값에 따라 javascript 없이 특정 동작을 하게 도와준다. 하지만, javascript로 관리하면 더 편리하게 사용할 수 있다. 그리고, 이 폼이 가진 값을 React에서 관리하고 추적할 수 있게 하는것을 제어 컴포넌트 (Controlled Component) 라고 부른다. 아래 예시를 보면 onChange 이벤트시 React 에서 바인딩된 함수가 호출되어 state로 관리하게 되는것을 볼 수 있다. class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this...