react (3) 썸네일형 리스트형 [React] Redux 기본 개념 Redux란 가장 사용률이 높은 상태 관리 라이브러리 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜서 더욱 효율적으로 관리 가능 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 상태변화 로직이 들어있는 스토오를 통하여, 우리가 원하는 컴포넌트에 원하는 상태값과 함수를 직접 주입할 수 있다. Redux에서 자주 사용되는 개념 정리 액션 1234567{ type : "ADD_TODO", data : { id : 0, text : "리덕스 배우기" }}cs 상태에 어떠한 변화가 필요하게 될 때 액션이라는 것을 발생시킨다. 하나의 객체로 표현하며 액션 객체에는 type필드는 필수로 들어가야한다. 그 외 data는 사용자 마음대로 조정이 가능하다. 액션 생.. [React] 흔하디 흔한 투두리스트 아니고 로그인 - 2 loginContainer 컴포넌트 만들기 123456789101112131415161718192021222324import React from 'react';import { useDispatch } from 'react-redux'; // ( 1 )import SignInForm from '../components/Auth/SignInForm';import { signInRequestAction } from '../redux/action/auth'; // ( 2 )import { Router } from "react-router-dom"; function AccountContainer () { const dispatch = useDispatch(); const onSignIn = (user) => di.. [React] 흔하디 흔한 투두리스트 아니고 로그인 - 1 개요 react를 처음으로 입문한다면 흔하디 흔한 투두리스트, 카운터 예제를 가장 많이 보게된다. 필자도 react를 투두리스트, 카운터와 같은 예제로 실습을 진행했다. 하지만 실제 프로젝트에 들어가면 서버와 비동기 통신을 해야하고, 상태 관리 등등 많은 개념이 필요해진다. 좀 더 편한 상태 관리를 위해 redux를 도입하고 비동기 통신을 위해 redux-saga를 이용하게 됐다. 하지만 모든 서비스에 필요한 흔하디 흔한 로그인, 회원가입 예제가 없어 처음에 감을 잡기 힘들어 조금이나마 도움이 되기 위해 포스팅하게 됐다. 간단한 설명만 진행하기 위해 프로젝트 구조화, 예제 코드는 간단하게만 작성한다. redux action 만들기 1 2 3 4 5 6 7 8 9 10 11 import { createAc.. 이전 1 다음
