Coding Story
[ React ] 리액트 Redux 로 게시판 만들어보기
이번 포스팅에선 리덕스를 이용해 게시판의 기본적인 Create, Read, Update, Delete 구현을 다룬다. 공부하며 간단히 만들어본거라 설명이 미약한 점 참고해주시길. 먼저 프로젝트를 만들고 리덕스 환경을 준비하고 실행한다. ( 이전에 react-redux 프로젝트를 생성했기에 two 를 붙여 생성했음 ). // project 생성 C:\> create-react-app react-redux-two // project 로 이동 C:\> cd react-redux-two // 사용할 redux 와 react-redux 설치 C:\react-redux-two> yarn add redux react-redux // project 실행 C:\react-redux-two> yarn start 메..
[ 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 의 기능으로 함수형 컴포넌트 내에서 능동적으로 상태를 ..