분류 전체보기

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[7]

1. Todos 완성 이번에는 Todo 컴포넌트를 위한 TodosContainer 를 작성할 차례입니다. 1.1 Todos Container 만들기 src 디렉토리안에 containers 디렉토리를 생성하고 그 안에 TodosContainer 를 작성합니다. - containers/TodosContainer.js import React from "react"; import { connect } from "react-redux"; import { changeInput, insert, toggle, remove } from "../modules/todos"; import Todos from "../components/Todos"; const TodosContainer = ({ input, todos, cha..

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[6]

1. 컨테이너 컴포넌트 만들기 이제 컴포넌트에서 리덕스 스토어에 접근하어 원하는 state를 받아 오고, 액션도 디스페치해야 합니다. 리덕스 스토어와 연동되어 있는 컴포넌트를 컨테이너 컴포넌트라고 합니다. 1.1 CounterContainer 만들기 src 디렉토리안에 containers 디렉토리를 생성하고 그 안에 CounterContainer 를 작성합니다. - containers/CounterContainer.js import React from "react"; import Counter from "../components/Counter"; const CounterContainer = () => { return }; export default CounterContainer; 위 컴포넌트를 리덕스와 ..

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[5]

1. 리엑트 어플리케이션 적용 이번에는 리액트 어플리케이션에 리덕스를 적용할 차례입니다. 스토어를 만들고 리엑트 어플리케이션에 리덕스를 적용하는 작업을 합니다. src 디렉토리의 index.js 파일을 통해서 처리가 됩니다. 1.1 스토어 만들기 가장 먼저 스토어를 추가합니다 스토어는 앞서 언급한 것처럼 최상위 파일 index.js 안에 스토어를 추가합니다. - src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { createStore } f..

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[4]

1. todos 모듈 만들기 이번에는 modules 디렉토리에 todos.js 파일을 생성합니다. 1.1 액션 타입 정의 하기 아래의 액션 타입을 먼저 정의합니다. - modules/todos.js // 액션의 타입 정의 const INCREASE = 'counter/INCREASE'; const DECREASE = "counter/DECREASE"; // 액션 생성함수 생성 export const increase = () => ({ type : INCREASE }); export const decrease = () => ({ type : DECREASE }); 1.2 액션 생성 함수 만들기 액션 생성 함수를 만듭어 줍니다. 이전과 달리 이번에는 액션 생성함수에서 전달 받을 파리미터가 필요합니다. 따라서..