끄적끄적

오늘은 React에서 만든 상태관리 라이브러리인 Recoil에 대해서 간단히 알아보고 이 Recoil을 이용해 Redux로 만들었던 Todolist처럼 간단한 Todolist를 만들어보겠습니다. ! Recoil이란? Recoil은 페이스북에서 만든 상태 관리 라이브러리입니다. Redux와 Mobx와 같은 전역 상태 관리 라이브러리로 프로그램의 뎁스와 복잡도가 증가함에 따라 편리하게 상태를 관리할 수 있게 해주는 것이죠. 아직 Redux나 Mobx와 같이 많은 인기를 받고 있지는 않지만 페이스북에서 React에 가장 알맞는 상태 관리 라이브러리로 만들어 나간다는 것을 믿다보면 인기를 많이 얻게 될지도 모르겠습니다... 또한, Recoil로 작성을 하게되면 기존의 Redux를 이용하기 위해 필요로 했던 여러..

이제 컴포넌트들을 작성할 시간입니다! 4. App.js 루트 컴포넌트로 MakeTodo와 Todo 컴포넌트를 return 해줍니다. // App.js import React from 'react'; import MakeTodo from './MakeTodo'; import Todo from './Todo'; function App(props){ return( // 할일을 적을 수 있는 컴포넌트 // 할일을 보여주는 컴포넌트 ) } export default App; 5. MakeTodo.js // MakeTodo.js import React, {useState} from 'react'; import { connect } from 'react-redux'; function MakeTodo(props){ c..

오늘은 Redux를 이용한 아주 간단한 TodoList를 만들어보려고합니다. ! Redux가 무엇인지 잘 모르시는 분은 pyolog.tistory.com/7 을 참고하시면 좋을 것 같습니다. 1. 우선 cra(create-react-app)로 리액트 프로젝트를 생성하겠습니다. npx crate-react-app redux_test 2. 먼저 src 폴더 밑에 store를 작성하겠습니다. import { createStore } from "redux"; // 초기 state , 배열에 저장하겠습니다. export const INITAIL_STATE = {todos : []}; //■■■■■■■■■■■■■■■■■■■■■■■ action 정의 ■■■■■■■■■■■■■■■■■■■■■■■■■■■ export fu..

Redux 란? 애플리케이션 상태를 관리하기위한 오픈 소스 JavaScript 라이브러리이다. 따라서, 꼭 React가 아니어도 사용할 수 있다는 것이다. React에서 컴포넌트별로 데이터를 주고 받으려면 어떻게 하는가?? 바로 속성값을 이용해서 주고 받는다. 부모 ↔ 자식 사이에서 데이터 교환이 일어날 수 있다. 하지만 프로그램이 복잡해지고 깊이가 깊어지면 최상위 컴포넌트에서 최하위 컴포넌트까지 데이터를 주려면 .. 타고 타고 타고... 내려가야한다. 이럴때 리덕스를 사용하면 편하다. 리덕스는 상태를 관리하기 위한 상태저장 컴포넌트라고 생각하면 편하다. 어디서든 데이터를 가져오고 수정할 수 있게 하는 것이다. ①액션(Action) 액션은 type속성을 가진 Javascript 객체다. store.dis..