본문 바로가기
반응형

분류 전체보기266

리액트 리덕스 모듈 생성 (덕스 구조) 덕스(Ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. 예를 들어 액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다. 하지만, 덕스 구조는 모양새로 묶는 대신 기능으로 묶어서 작성한다. 예를 들어 같은 기능을 가진 action, actionCreator, reducer을 한 파일에 넣는 것이다. 덕스 구조의 예시는 아래와 같다 // widgets.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMO.. 2021. 9. 3.
리덕스를 통한 리액트 상태관리 흐름도 리덕스를 통한 리액트 상태관리 흐름도 GitHub - SangHun-OH/Sparta-React Contribute to SangHun-OH/Sparta-React development by creating an account on GitHub. github.com - 위의 BucketList Projects 에서 여지껏 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있다. 또한 추가하기 버튼도 App.js에 있다. - 컴포넌트를 만들어 분리하면, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없기 때문에 컴포넌트화 시키기 어렵다. - 이와 같은 경우에는, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 사용하면 된.다 - 리덕스는 여러 컴포넌.. 2021. 9. 3.
리액트 리덕스란? (React Redux) 리액트 리덕스란? - 상태관리 라이브러리 - 전역 상태 관리를 도와주는 라이브러리 리액트 리덕스 설치 yarn add redux react-redux 리덕스 공식 홈페이지 Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 리덕스의 개념과 용어 리덕스 데이터를 한 곳에 넣고, 여기저기에서 꺼내볼 수 있게 해주는 것. 리액트와 별도로 사용할 수 있다. 상태관리를 위해 다른 프론트엔드 프레임워크/라이브러리와 함께 쓸 수 있다. State - 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. - 딕셔너리 형태({[key]: value})형태로 보관합니다. Action - 상태에 변화가 필요할 때(=.. 2021. 9. 3.
리액트에서 라우팅 처리 - 잘못된 주소 처리 잘못된 주소 처리 - 웹페이지 개발자가 미리 정하지 않은 주소로 들어온 경우를 다루는법 1. NotFound.js 파일을 만들고 빈 컴포넌트를 생성 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js에서 불러옵니다. import NotFound from "./NotFound"; 3. Switch로 Route를 감싸준다. 4. NotFound컴포넌트를 Route에 주소 없이 연결 5. 편의성을 위한 NotFound에 뒤로가기 버튼 생성 - NotFound 에서는 이미 history가 자동으로 넘어와진다. - 하지만 일부러 넘기려면 아래처럼 코딩한다. .. 2021. 9. 3.
리액트에서 라우팅 처리 리액트 라우터 설치 & 적용 - 리액트에서 라우팅을 처리하기 위해 라우터를 설치해주자 리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript develop.. 5sangs.tistory.com 리액트 페이지 전환 기능 만들기 1. index.js에 Browser Router 적용하기 import {BrowserRouter} from "react-router-dom" ReactDOM.render( , documen.. 2021. 9. 2.
리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com - 위 사이트에서 필요한 패키지를 검색해보자 - 보통 상위에 노출되는 것을 사용하면 된다. - npm을 이용하여 설치하는 방법이 나와있다. - 자신이 yarn을 이용한다면 패키지 이름만 가져오면.. 2021. 9. 2.
반응형

티스토리툴바