전체 글 (166) 썸네일형 리스트형 카운트앱 만들기(1) - mobx 6버전으로 만들기 npx create-react-app ./ npm install mobx 위 두 명령어를 사용해서 react과 mobx를 설치합니다. makeObservable 속성(property), 모든 객체, 배열, map과 set은 observable로 설정될 수 있습니다. 객체를 observable로 만드는 가장 기본적인 방법은 makeObservable를 사용하여 속성마다 주석을 지정하는 것입니다. counterStore.js 파일을 생성후 코드를 위와 같이 작성합니다. observable : state를 저장하는 추적 가능한 필드를 정의합니다. action : state를 수정하는 메소드를 표시합니다. computed : state로부터 새로운 사실을 도출하고 그 결과값을 캐시하는 getter를 나타냅니다... Mobx Mobx란? react에서 redux이후로 많이 사용되는 상태 관리 라이브러리입니다. 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리입니다. mobx 공식문서: https://ko.mobx.js.org/README.html 원래는 @데코레이터를 사용했지만 mobx 6부터는 데코레이터 사용을 지양하는 중입니다. MobX 작동원리 MobX 예제를 통해 작동원리 이해하기 redux toolkit - API들 redux toolkit redux toolkit은 redux 로직을 작성하기 위한 공식 권장 접근 방식입니다. redux 코어를 둘러 싸고 있으며 redux앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있습니다. redux toolkit은 제안된 모범 사례를 기반으로 하여 대부분의 redux 작업을 단순화하고 일반적인 실수를 방지하고 redux app을 더 쉽게 작성할 수 있도록 합니다. redux toolkit 공식문서: https://redux-toolkit.js.org/tutorials/quick-start redux toolkit과 기존 redux 비교 기존 redux toolkit store생성 createStore configureStore action생성 상수와 생성자 함.. Redux앱(3) - middleware Redux 로깅 미들웨어 생성하기 루트경로에 있는 index.tsx 파일에 미들웨어를 생성하고 등록합니다. Redux Thunk axios 설치 npm install axios --save 위 명령어를 통해 axios 설치합니다. posts데이터를 위한 요청 App.tsx파일의 추가코드입니다. posts데이터를 위한 요청 보냈습니다. 에러가 굉장히 많이 나올 겁니다. 에러 나는 이유는 아래와 같습니다. Actions은 객체여야 하는데 현재는 함수를 dispatch하고 있습니다. 그러기 때문에 에러가 생깁니다. 에러 해결책은 아래와 같습니다. 함수를 dispatch할 수 있게 해주는 redux-thunk 미들웨어를 설치해서 사용하면 됩니다. npm install redux-thunk --save 이 명령어.. Redux앱(2) - ToDo 앱 추가 combineReducer - ToDo 기능 추가 현재까지 만든 카운트 앱에서 ToDo앱을 추가해보겠습니다. Reducer는 하나만 존재하지만 안에 여러개 sub reducer를 생성한 후 root reducer에 combineReducers하면 됩니다. interface Action { type: string } const counter = (state = 0, action: Action) => { switch(action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; default: return state; } } export default counter; 기존에 reducer폴더안에 있는 index.ts.. Redux앱(1) - 카운트 앱 생성 실무에서 redux를 사용하면 보통 미들웨어와 같이 사용합니다. 이번 앱은 redux만 배우는 것이라 미들웨어 없이 카운터 앱을 만들겠습니다. react 앱 설치 npx create-react-app ./ --template typescript react-redux-app폴더를 열고 위 명령어대로 react를 설치합니다. redux 라이브러리 설치 npm install redux --save 위 명령어대로 redux를 설치합니다. Counter UI 및 함수 생성 Clicked: times + - App.tsx의 UI입니다. Reducer 생성 const counter = (state = 0, action: {type: string}) => { switch(action.type) { case "INCRE.. Redux 리덕스(Redux)란? Redux는 JS app을 위한 관리 라이브러리입니다. props vs state vs redux props state properties의 줄임말. 구성 요소가 서로 통신하는 방법임. 컴포넌트 안에서 데이터를 전달할 때 state사용 props는 상위 구성 요소에서 아래쪽으로 흐름 mutable 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 변경해야 함 state가 변하면 re-render 됨 redux는 state를 관리하는 것입니다. redux 데이터 Flow(strick unidirectional data flow) ACTION은 간단한 JS 객체입니다. 여기에는 우리가 수행하는 작업의 유형을 지정하는 type속성이 있으며 선택적으로 redux 저장소에.. 여행상품 프로젝트(4) 스텝을 이용해서 페이지 나누기 주문 페이지에서 주문확인 페이지 그리고 주문 완료 페이지로 이동해야 합니다. 그러기 위해 각 페이지마다 페이지의 스텝을 주겠습니다. 위 예시처럼 step이 0일 때 메인페이지를 보여주고, 1일때 주문확인 페이지, 2일때 주문 완료 페이지를 보여줍니다. App.js의 추가 코드입니다. state를 사용해서 step값을 설정합니다. 左) OrderPage의 추가 코드입니다. 총가격이 0이 아니면 step1로 넘어갑니다. 右) SummaryPage의 추가 코드입니다. 주문확인 페이지 구현하기 const [orderDetails] = useContext(OrderContext) const productArray = Array.from(orderDetails.products) con.. 여행상품 프로젝트(3) Context를 사용해서 데이터 제공하기 루트경로에 있는 index.js의 추가 코드입니다. 전에 배웠던 대로 작성하면 위와 같이 작성해야 합니다. 하지만 여기에 value가 여러개 들어갈 수 있으며 업데이트도 해야하는 함수들도 같이 들어가야 되서 해당 컴포넌트를 아예 함수를 만들려고 합니다. import { createContext, useState } from "react"; export const OrderContext = createContext() export function OrderContextProvider(props) { // 필요한 데이터 형식 const [orderCounts, setOrderCounts] = useState({ products: new Map(), options: n.. 여행상품 프로젝트(2) 상품 이미지 가져오기 https://github.com/Skye7095/react-context-app/tree/master/server 백엔드 내용은 위 링크에 업로드했습니다. import React, { useEffect, useState } from 'react' import axios from 'axios' import Products from './Products' import Options from './Options' const Type = ({ orderType }) => { const [items, setItems] = useState([]) useEffect(() => { loadItems(orderType); }, [orderType]) const loadItems = async (o.. 이전 1 2 3 4 5 ··· 17 다음
