본문 바로가기

✏️

(36)

React 공부하기(8) - 상태 관리, Context API of 리액트 타입스크립트 3. 타입스크립트로 리액트 상태 관리하기 카운터 만들어보기 인풋 상태 관리하기 useReducer 사용해보기 import React, { useReducer } from 'react'; type Color = 'red' | 'orange' | 'yellow'; type State = { count: number; text: string; color: Color; isGood: boolean; }; type Action = | { type: 'SET_COUNT'; count: number } | { type: 'SET_TEXT'; text: string } | { type: 'SET_COLOR'; color: Color } | { type: 'TOGGLE_GOOD' }; function reducer(st..

React 공부하기(8) - 리액트 프로젝트에서 타입스크립트 사용하기 타입스크립트를 사용하는 이유 1. IDE(Integrated Development Environment)를 더욱 더 적극적으로 활용 (자동완성, 타입확인) 2. 실수 방지 1. 타입스크립트 연습 $ mkdir ts-practice # ts-practice 라는 디렉터리 생성 $ cd ts-practice # 해당 디렉터리로 이동 $ yarn init -y # 또는 npm init -y 이렇게 하면 ts-practice 디렉터리에 package.json 이라는 파일이 만들어집니다. 타입스크립트 설정파일 생성하기 $ yarn global add typescript 그리고 프로젝트 디렉터리 안에서 tsc --init 명령어를 입력하면 tsconfig.json 파일이 자동생성됩니다. { "compilerOpti..

React 공부하기(7) - redux-saga of 리덕스 미들웨어 10. redux-saga : "액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 한다." 예를 들어,,, 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 할 수 있습니다. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리 할 수 있습니다 (참고) API 요청이 실패했을 때 재요청하는 작업을 할 수 있습니다. Generator 문법 배우기 => 함수를 작성할 때 함수를 특정 구간에 멈춰 놓을 수도 있고, 원할 때 다시 돌아가게 할 수도 있다. => 결과값을 여러번 반환할 수도 있다. function* sumGenerator() { co..

React 공부하기(7) - redux-thunk of 리덕스 미들웨어 4. redux-thunk : "액션 객체가 아닌 함수를 디스패치 할 수 있다." => 함수를 디스패치 할 때에는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와주어야 한다. 이 함수를 만들어주는 함수를 thunk라고 부른다. const getComments = () => (dispatch, getState) => { // 이 안에서는 액션을 dispatch 할 수도 있고 // getState를 사용하여 현재 상태도 조회 할 수 있습니다. const id = getState().post.activeId; // 요청이 시작했음을 알리는 액션 dispatch({ type: 'GET_COMMENTS' }); // 댓글을 조회하는 프로미스를 반환하는 getComments 가 있다고 가정해봅..

React 공부하기(7) - 리덕스 미들웨어 보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때이다. (redux-thunk, redux-sage 등) $ yarn add redux react-redux 2. 미들웨어 만들어보고 이해하기 리덕스 미들웨어의 템플릿 const middleware = store => next => action => { // 하고 싶은 작업... } function middleware(store) { return function (next) { return function (action) { // 하고 싶은 작업... }; }; }; store: 리덕스 스토어 next: 액션을 다음 미들웨어에게 전달하는 함수 next(action) action: 현재 처리하고 있는 액션 객체 미들웨어 직접 작성..

React 공부하기(6) - 리덕스(Redux) 🔧 리덕스 개발자도구 적용하기 https://react.vlpt.us/redux/06-redux-devtools.html 6. 리덕스 개발자도구 적용하기 · GitBook 6. 리덕스 개발자도구 적용하기 이번에는 리덕스 개발자 도구를 사용하는 방법에 대해서 알아보겠습니다. 리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회 할 수 있 react.vlpt.us 3. 리덕스 사용할 준비하기 import { createStore } from 'redux'; // 스토어 생성 import { createStore } from 'redux'; // createStore는 스토어를 만들어주는 함수입니다. // 리액트 프로젝트에서는 단 하나의 스토어를 만듭니다. /* 리덕스에서 관리 할 상태 정..

React 공부하기(5) - 리액트 라우터 react-router를 통한 리액트 싱글 페이지 어플리케이션 만들기 1. 기본적인 사용법 $ yarn add react-router-dom 프로젝트에 라우터 적용 import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기 import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; // * App 을 BrowserRouter 로 감싸기 ReactDOM.render( , document.getElementById(..

React 공부하기(4) - API 연동하기 1. API 연동의 기본 $ yarn add axios GET: 데이터 조회 POST: 데이터 등록 PUT: 데이터 수정 DELETE: 데이터 제거 import axios from 'axios'; axios.get('/users/1'); axios.get('https://jsonplaceholder.typicode.com/users'); axios.post('/users', { username: 'blabla', name: 'blabla' }); useState와 useEffect로 데이터 로딩하기 useState: 요청 상태 관리 요청의 결과 로딩 상태 에러 useEffect: 컴포넌트가 렌더링되는 시점에 요청을 시작 import React, { useState, useEffect } from 'rea..

이전 1 2 3 4 5 다음

티스토리툴바