728x90 Front-End39 [react-redux] 4. ract-redux 도입 출처 : 생활코딩 react redux 시작전 npm install react-redux 설치 1. index.js - component와 store 연결을 한번에 해결 > Provier와 store 이용 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {Provider} from 'react-redux'; import store from './store'; ReactDOM.render( , document.getElementById('root') ); // If.. 2021. 2. 17. [react-redux] 3. redux 와 component 코드 분리 출처 : 생활코딩 react redux 0. 핵심 - redux 도입으로 인한 state 전달 용이 - 하지만 redux 코드와 기존 컴포넌트의 코드의 섞임으로 재사용성이 없어짐. - react-redux 도입 이전 코드 **기존 코드(AddNumber.jsx, DisplayNumber.jsx)들을 되돌린다. 1. AddNumber.jsx import React, {Component} from 'react'; export default class AddNumber extends Component{ state = {size:1} render(){ return( Add Number ) } } 2. DisplayNumber.jsx import React, {Component} from 'react'; expo.. 2021. 2. 17. [react-redux] 2. redux 도입 어플리케이션 출처 : 생활코딩 react redux 0. 핵심 - redux 도입으로 인한 state 전달 용이 - 하지만 redux 코드와 기존 컴포넌트의 코드의 섞임으로 재사용성이 없어짐.(react-redux의 필요성) 들어가기전 : npm install redux 를 통해 redux 설치가 필요하다. 1. AddNumber.jsx - dispatch를 통해 저장소의 reducer로 type과 state 변수를 보낸다. import React, {Component} from 'react'; import store from '../store'; export default class AddNumber extends Component{ state = {size:1} render(){ return( Add Number.. 2021. 2. 17. [react-redux] 1. 일반 어플리케이션 출처 : 생활코딩 react redux 0. 핵심 > 컴포넌트 속 컴포넌트 속.... 으로 컴포넌트가 쌓일경우 컴포넌트간 state 전달을 위한 코드량이 무수히 늘어난다. 1. App.css div{ border:5px solid #764abc; margin:10px; color:#764abc; padding:10px; } 2. App.js import './App.css'; import React, {Component} from 'react'; import { render } from '@testing-library/react'; import AddNumberRoot from "./components/AddNumberRoot"; import DisplayNumberRoot from "./componen.. 2021. 2. 17. 이전 1 2 3 4 5 6 ··· 10 다음 728x90