끄적끄적

오늘은 React 프로젝트에서 react-naver-maps 라이브러리를 이용하여 지도를 띄우는 법을 포스팅하겠습니다. NCP(Naver Cloud Platform)에서 AI-Naver-API 중 Web Dynamic Map 과 Mobile Dynamic Map을 신청합니다. 인증키 발급 및 등록 과정은 생략하겠습니다! 참고로 가격은 무료이며 길찾기Api를 이용해보고 싶지만 그 기능은 유료라서 못사용해봤네요 ...:( ①. 일단 필요한 패키지를 다운받습니다. npm install react-naver-maps ②. 코드 작성 ...// import { NaverMap, Marker } from 'react-naver-maps'; import { RenderAfterNavermapsLoaded } from..

이제 컴포넌트들을 작성할 시간입니다! 4. App.js 루트 컴포넌트로 MakeTodo와 Todo 컴포넌트를 return 해줍니다. // App.js import React from 'react'; import MakeTodo from './MakeTodo'; import Todo from './Todo'; function App(props){ return( // 할일을 적을 수 있는 컴포넌트 // 할일을 보여주는 컴포넌트 ) } export default App; 5. MakeTodo.js // MakeTodo.js import React, {useState} from 'react'; import { connect } from 'react-redux'; function MakeTodo(props){ c..

오늘은 Redux를 이용한 아주 간단한 TodoList를 만들어보려고합니다. ! Redux가 무엇인지 잘 모르시는 분은 pyolog.tistory.com/7 을 참고하시면 좋을 것 같습니다. 1. 우선 cra(create-react-app)로 리액트 프로젝트를 생성하겠습니다. npx crate-react-app redux_test 2. 먼저 src 폴더 밑에 store를 작성하겠습니다. import { createStore } from "redux"; // 초기 state , 배열에 저장하겠습니다. export const INITAIL_STATE = {todos : []}; //■■■■■■■■■■■■■■■■■■■■■■■ action 정의 ■■■■■■■■■■■■■■■■■■■■■■■■■■■ export fu..

Redux 란? 애플리케이션 상태를 관리하기위한 오픈 소스 JavaScript 라이브러리이다. 따라서, 꼭 React가 아니어도 사용할 수 있다는 것이다. React에서 컴포넌트별로 데이터를 주고 받으려면 어떻게 하는가?? 바로 속성값을 이용해서 주고 받는다. 부모 ↔ 자식 사이에서 데이터 교환이 일어날 수 있다. 하지만 프로그램이 복잡해지고 깊이가 깊어지면 최상위 컴포넌트에서 최하위 컴포넌트까지 데이터를 주려면 .. 타고 타고 타고... 내려가야한다. 이럴때 리덕스를 사용하면 편하다. 리덕스는 상태를 관리하기 위한 상태저장 컴포넌트라고 생각하면 편하다. 어디서든 데이터를 가져오고 수정할 수 있게 하는 것이다. ①액션(Action) 액션은 type속성을 가진 Javascript 객체다. store.dis..

앞서 Class편에서처럼 React는 생명주기를 갖습니다. 생명주기를 쉽게 표현하면 화면이 처음에 생성 될때나, 중간에 화면의 내용이 바뀌거나, 화면이 전환되어 소멸될 때 일어나는 과정들이라고 이해하면 좋을 것 같습니다. Hooks에서는 useEffect를 통해서 생명주기를 관리할 수 있습니다. 기존에 클래스형과 함수형의 차이였던 부분으로 알고 있는데 Hooks에서 더욱 간단하게 생명주기를 관리할 수 있으니 사람들이 왜 Hooks를 이용하는지 알 것 같습니다. 1. useEffect의 구조입니다. useEffect(, ); function은 컴포넌트가 (re)render 되었을때 실행할 함수이며, 그다음 파라미터인 array는 어떤 state의 변화가 감지되었을때만 render를 하고 싶을때 그 변수를 ..

리액트의 컴포넌트들은 다음과 같이 세 단계를 거치게 됩니다. 초기화, 업데이트, 소멸. 각 단계에서 호출되는 메서드를 생명 주기 메서드 라고 합니다. React 입문자가 사이트를 만들어 보게되면 생명주기를 잘 이용하지 않을 뿐더러, 중요성을 잘모르고 만들다보면 꼭! 어느순간 뒤통수를 쎄게 맞는 순간이 있습니다.. 내 뒤통수가 푹 파인 이유... 요즘은 React Hook을 이용한 Functional Component가 대세라고 하지만 아직까지 어느 부분에 있어서는 class형 컴포넌트를 사용함에 이점이 있고, 사용하는 사람들도 은근 많은것 같습니다. 그럼 자주보이는 React 생명주기를 하나씩 살펴보겠습니다! ■ constructor constructor 메서드 작성이 필요한 대표적인 예는 초기 속성값으..