본문 바로가기

내마음대로만들어보자/React58

[복습]React 주요 개념정리 - 리덕스를 통한 상태 관리 1. 상태관리의 필요성 현재는 App.js에 리스트 항목 배열을 두고 props로 넘겨주고 있고 추가하기버튼도 App.js에 있는 상황이다. 만일 추가하기버튼과 텍스트영역을 AddListItem 컴포넌트로 분리하고싶은경우 어떻게해야될까! 단순히 파일을 만들고 코드를 분리한다면 문제점이 발생한다. → 자식 컴포넌트는 부모 컴포넌트의 state를 마음대로 수정할 수 없다. (데이터는 단방향으로만 흐리기때문에) 이러한 부분들을 리덕스를 통해 해결을 할 수 있다. 리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을때 유용하게 사용할 수 있다. 또한 데이터를 관리하는 로직을 빼면 컴포넌트는 오직 뷰만 관리하면 되기때문에 유지보수에도 용이하다. 2. 상태관리 흐름 1. 리덕스 Store를 Component에 연결한다.. 2021. 9. 26.
[복습]React 주요 개념정리 - 리덕스 개념 1. 리덕스란? 리덕스는 흔히 사용하는 상태관리 라이브러리 이다. 전역 상태관리를 할수있도록 도와주는 친구라고 생각하면된다. * 리덕스 패키지 설치 yarn add redux react-redux 2. 리덕스 개념과 용어 리덕스는 데이터를 한군데 몰아넣고 여기저기에서 꺼내서 사용할 수 있도록 해주는 라이브러리이다. - State 리덕스에서 지정하는 상태값(=데이터) 이고, 딕셔너리 형태로 보관을 한다 {[key]: value} - Action 상태에 변화가 필요할떄(=가지고 있던 데이터를 변경할때) 발생하는 것 {type: 'CHANGE_STATE', data: {...}} 액션은 객체이고, 위와같은 형식으로 사용되는데 type은 이름 같은것이다. - ActionCreator 액션생성함수라고도 불리며, .. 2021. 9. 24.
[복습]React 주요 개념정리 - 잘못된 주소 처리하기 이번에는 정의하지 않은 주소로 접속하는경우에 대해서 처리하는 방법을 복습해보자. 1. 우선 NotFound.js을 만들어서 연결해보자 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않습니다!!; }; export default NotFound; 2. App.js에서 불러오자. import Notfound from "./Notfound"; 3. Switch 를 추가하자 ... render() { return ( ... ( )} /> ... 4. NotFound를 route에 주소 없이 연결해주면 끝 5. NotFound.js 에 뒤로가기 적용하기 - App.js에서 history를 props로 넘겨주기 ( )}/> - No.. 2021. 9. 23.
[복습]React 주요 개념정리 - 라우팅 1. SPA 란? Single Page Application : 서버에 주는 html 이 하나라는 뜻! 일반적인 웹사이트는 페이지를 이동할때마다 정적자원을 받아오지만 SPA는 정적자원을 한번만 받아온다. 2. 라우팅 이란? 브라우저 창 주소에 따라 다른 페이지를 보여주는걸 라우팅 이라고한다. 3. 리액트에서 라우팅 처리하기 1) 패키지 설치하기 yarn add react-router-dom 참고 공식문서 https://reactrouter.com/web/guides/primary-components React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 2) 페이지 전환하기 - index.js에 Brows.. 2021. 9. 23.

티스토리툴바