-
[ React ] 리액트 Material UI 사용해보기
Material-UI 란 리액트 개발에서 쉽게 사용할 수 있는 UI Framwork 이다. 엘리먼트들의 디자인부터 아이콘까지, 다양한 디자인에 대해 집중되어져있다. 이번 포스팅은 전 포스팅의 프로젝트에 Material Ui 를 적용해 보다 맛깔나게 만들어 보도록 하자. 먼저 Material Ui 를 설치해야한다. // yarn install yarn add @material-ui/core // npm install npm install @material-ui/core 사용법은 너무나도 간단하다. import 하고 그냥 사용하던 커스텀 마이징해서 사용하면 된다. 본 포스팅은 커스텀 마이징은 귀찮아서 하지 않았당 ㅎ. 먼저 가장 초기에 아무 style 이 걸려있지 않은 실행 화면은 다음과 같았다. 너무 못 ..
-
[ React ] 리액트 React-Hook-Form
만약 프로젝트에서 리액트를 사용한다면 아주 작은 사이즈의 프로젝트가 아닌 이상, 폼 양식을 사용하지 않는 프로젝트는 드물 것이다. 하지만 리액트만으로 Input Validation, Form Submit 등 폼 관리를 하기엔 너무 고단하다. 이러한 문제점을 위해 보다 적은 코드양으로 쉽게 작성할 수 있는 라이브러리가 존재하는데, 그것이 React-Hook-Form 이다. React-Hook-Form 을 사용하기 위해 아래와 같이 설치해야 함. yarn add react-hook-form 저번 포스팅에서 다루었던 BoardNew.js 컴포넌트를 위주로 훅 폼을 적용시켜 살펴본다. ( 현 포스팅만 봐도 무방하다. ) 먼저 기존의 BoardNew.js 코드는 아래처럼 되어있다. import React from..
-
[ React ] 리액트 Saga + Toolkit ( 미들웨어 사가, 리덕스 툴킷 )
지금껏 다룬 포스팅의 project 에 Middleware Saga 와 Redux Toolkit 을 적용시켜보자. 먼저 해당 포스팅에서 사용할 기능들을 설치하자. // Redux 와 React-Redux 설치 yarn add redux react-redux // Redux Toolkit 설치 yarn add @reduxjs/toolkit // 비동기 통신을 위한 axios 설치 yarn add axios // 미들웨어 Saga 설치 yarn add redux-saga // Json Server 설치 yarn global add json-server Directory 구조는 다음과 같다. src ┕ api ┕ posts.js ┕ component ┕ BoardList.js ┕ BoardNew.js ┕ co..
-
[ React ] 리액트 리덕스 툴킷 redux-toolkit
Redux-Toolkit ? redux-toolkit 은 redux 를 보다 편리하게 사용하기 위해 제공되어 지는 redux 개발 도구이다. 이는 redux-thunk 를 기반으로 사용하지만, 그렇다고 해서 redux-saga 등 다른 미들웨어를 사용하지 못하는 건 아니다. Redux-Toolkit 기능 중 자주 사용되는 몇 가지만 살펴보자. 이전 포스팅의 코드를 기준으로 들어 설명하긴 했으나 현 포스팅만 봐도 무방하다. Redux-Toolkit 설치 ( 해당 project 경로에서 해야 함 ) // NPM npm install @reduxjs/toolkit // Yarn yarn add @reduxjs/toolkit configureStore import { createStore } from..
-
[ 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 메..