Front-end/React.js
-
4. react-async 로 요청 상태 관리하기 - API 연동 | 벨로퍼트Front-end/React.js 2020. 7. 24. 17:15
react-async 는 우리가 지난 섹션에서 만들었던 useAsync 와 비슷한 함수가 들어있는 라이브러리입니다. 이 라이브러리 안에 들어있는 함수 이름도 useAsync 인데요, 사용법이 조금 다릅니다. 만약에 여러분이 매번 프로젝트를 만들 때 마다 직접 요청 상태 관리를 위한 커스텀 Hook 을 만들기 귀찮다면, 이 라이브러리를 사용하시면 됩니다. 정말 많은 기능들이 내장되어있답니다. 다만, 사용법이 조금 다릅니다. 우리가 만들었던 커스텀 Hook 은 결과물을 배열로 반환하는 반면 이 Hook 은 객체 형태로 반환합니다. 우선, 해당 라이브러리를 설치해주세요. $ yarn add react-async react-async 의 README 에 있는 공식 사용법을 확인해볼까요? import { useA..
-
3. useAsync 커스텀 Hook 만들어서 사용하기 - API 연동 | 벨로퍼트Front-end/React.js 2020. 7. 24. 11:51
데이터를 요청해야 할 때마다 리듀서를 작성하는 것은 번거로운 일 입니다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아봅시다. src 디렉터리에 useAsync.js 파일을 생성하고, 다음 코드를 작성해보세요. /src/useAsync.js : import { useReducer, useEffect } from 'react'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: ac..
-
2. useReducer로 요청 상태 관리하기 - API 연동 | 벨로퍼트Front-end/React.js 2020. 7. 23. 15:11
이번에는 이전에 구현했던 User 컴포넌트에서 useState 대신에 useReducer 를 사용해서 구현을 해보도록 하겠습니다. useReducer 를 사용하여 LOADING, SUCCESS, ERROR 액션에 따라 다르게 처리를 해봅시다. /src/Users.js : import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, ..
-
1. API 연동의 기본 - API 연동 | 벨로퍼트Front-end/React.js 2020. 7. 23. 14:39
API 연동을 하기 위해서, 우선 프로젝트를 새로 만들어주도록 하겠습니다. $ npx create-react-app api-integrate 그리고, API 를 호출하기 위해서 axios 라는 라이브러리를 설치하세요. $ cd api-integrate $ yarn add axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있는데요, 만약 이 메서드들에 대하여 잘 모르시는 경우에는 REST API 에 대한 글을 한번 읽어보세요. 간단하게 설명을 드리자면, REST API 를 사용 할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 메서드들은 다음 의미를 가지고 있습니다. ・ GET: 데이터 조회 ・ POST: 데이터 등록 ・ PUT..
-
4. 기능 구현하기 - TodoList | 벨로퍼트Front-end/React.js 2020. 7. 23. 11:41
Context 를 만들어주었으니, 이제 Context 와 연동을 하여 기능을 구현해봅시다. Context 에 있는 state 를 받아와서 렌더링을 하고, 필요한 상황에는 특정 액션을 dispatch 하면 됩니다. TodoHead 완성하기 TodoHead 에서는 done 값이 false 인 항목들의 개수를 화면에 보여줍니다. /src/components/TodoHead.js : import React from 'react'; import styled from 'styled-components'; import { useTodoState } from '../TodoContext'; const TodoHeadBlock = styled.div` // ... function TodoHead() { const tod..
-
3. Context API 를 활용한 상태관리 - TodoList | 벨로퍼트Front-end/React.js 2020. 7. 22. 16:50
우리가 만든 Todo List 애플리케이션에서, 만약 상태 관리를 한다면 다음과 같은 구조로 구현 할 수 있습니다. App 에서 todos 상태와, onToggle, onRemove, onCreate 함수를 지니고 있게 하고, 해당 값들을 props 를 사용해서 자식 컴포넌트들에게 전달해주는 방식으로 구현 할 수 있죠. 이렇게 구현하는것도 큰 문제는 없습니다. 이 프로젝트는 정말 작고 단순하기 때문이죠. 하지만, 프로젝트의 규모가 커지게 된다면 최상위 컴포넌트인 App 에서 모든 상태 관리를 하기엔 App 컴포넌트의 코드가 너무 복잡해질 수도 있고, props 를 전달해줘야 하는 컴포넌트가 너무 깊숙히 있을 수도 있습니다 (여러 컴포넌트를 거쳐서 전달해야 하는 경우를 의미합니다) 만약 Context AP..
-
2. 프로젝트 생성 UI 준비(2) - TodoList | 벨로퍼트Front-end/React.js 2020. 7. 22. 11:41
TodoItem 만들기 이번 컴포넌트에서는 각 할 일 항목들을 보여주는 TodoItem 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 react-icons 에서 MdDone 과 MdDelete 아이콘을 사용합니다. /src/components/TodoItem.js : import React from 'react'; import styled, { css } from 'styled-components'; import { MdDone, MdDelete } from 'react-icons/md'; const Remove = styled.div` display: flex; align-items: center; justify-content: center; color: #dee2e6; font-size: 24px; ..
-
1. 프로젝트 생성 UI 준비(1) - TodoList | 벨로퍼트Front-end/React.js 2020. 7. 22. 10:53
투두리스트의 기능을 구현하기 전에, 우리 프로젝트에서 필요한 모든 컴포넌트들의 UI 를 미리 만들어보겠습니다. 우선 create-react-app 을 사용하여 새로운 프로젝트를 만들어주세요. $ npx create-react-app mashup-todolist 그리고, 해당 디렉터리에 들어가서 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치하세요. $ cd mashup-todolist $ yarn add react-icons styled-components 그 다음에는 에디터로 해당 디렉터리를 열고 yarn start 를 하여 개발 서버를 실행해주세요. 만들어야 할 컴포넌트 확인하기 우리가 이번에 만들어야 할 컴포넌트는 총 5개 입니다. 컴포넌트를 만..