Coding Story/REACT
[ React ] 리액트 리덕스(Redux) 사용해보기
저번 게시글에선 리덕스의 정의에 대해서만 다루었고 이번 게시글에선 리덕스를 직접 사용해보자. 먼저 아래와 같이 CMD 에 입력해 프로젝트를 만든다. C:\> create-react-app react-redux C:\> cd react-redux 리덕스 모듈 redux 와 리덕스의 다양한 도구들이 들어있는 react-redux를 설치한다. C:\react-redux> yarn add redux react-redux react-redux 프로젝트를 열어보자. 디렉터리의 구조는 다음과 같이 만들었다. 소스를 흐름대로 살펴보도록 하겠다. src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './A..
[ React ] 리액트 리덕스(Redux)란?
Redux 에 대해 알아보기 전에 이해에 도움이 되기 위해 예시를 들어 설명해보자면, 만약 A 컴포넌트가 B 컴포넌트에, B 컴포넌트는 C 컴포넌트에.. 이렇게 D, E, F, G 컴포넌트 까지 이어진 루트가 있다고 가정했을 때 A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야한다. 얼마나 비효율적인 패턴인지는 굳이 설명을 안해도 알 것이다. 이 때 하나의 스토어 ( Store ) 라는 매체를 두면 위의 순서가 아니라, A ▶ Store ▶ G 식의 효율적인 접근이 가능하게 해준다. 이 Store 는 Redux 를 통해 사용할 수 있다. Red..
[ React ] 리액트 Axios
이번 게시글에선 Axios 를 이용해 api 와 연동하는 간단한 예제를 살펴본다. Axios 는 HTTP 클라이언트 라이브러리로 React, Vue 에서 많이 사용된다. 이는 Promise 기반으로 XHRHttpRequest 요청을 쉽게 할 수 있게 해주는 강점이 있다. Promise 가 뭔지 궁금하면 여기를 참조하길 바란다. 아래와 같이 CMD 에 입력한다. // react-axios 프로젝트 생성 C:\> create-react-app react-axios // react-axios 프로젝트로 이동 C:\> cd react-axios // yarn 으로 axios 설치 C:\react-axios> yarn add axios // 실행 C:\react-axios> yarn start reac..
[ React ] 리액트 Hooks(useState, useEffect)
Hooks 는 함수형 컴포넌트에서도 state 를 관리할 수 있도록 해주는 useState 와 렌더링 직후 작업을 수행하는 useEffect 등을 제공한다. useContext, useReducer, useCallBack 등 여러 기능이 더 있지만, 현 게시글에선 useState 와 useEffect 기능만을 다룬다. 이는 리액트 version 16 부터 제공되는 기능이다. react-hook 이라는 프로젝트를 생성하고 실행해보자. C:\> create-react-app react-hook C:\> cd react-hook C:\react-hook> yarn start useState 먼저 useState 는 가장 기본적인 Hook 의 기능으로 함수형 컴포넌트 내에서 능동적으로 상태를 ..
[ React ] 리액트 라우터 React-Router
이번 게시글에선 간단하게 리액트-라우터(React-Router)가 뭔지 알아보고 사용할 예정이다. 리액트-라우터(React-Router)란? 리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해 페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다. 이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다. 먼저 react-router 라는 프로젝트를 만들고 해당 프로젝트 경로로 이동하자. C:\> create-react-app react-router C:\> cd react-router React-Router 를..