728x90 Front-End/React23 [React Hook] 1. Hook 소개 출처 공식문서 : Hook의 개요 – React (reactjs.org) 1. Hook 필요 이유 (1) 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. > 하위 컴포넌트에서 상위 컴포넌트의 state 를 받기 위해 render props 등을 사용했다. (2) 복잡한 컴포넌트들 > componentDidmount 같은 생명주기 메서드가 데이터를 불러오기도 하지만 이벤트 리스너를 설정하는 것과 같은 다양한 로직이 포함되기도 했다. 이러한 컴포넌트들은 쪼개고 테스트 하기가 어려웠다. 그래서 별도의 상태 관리 라이브러리와 함께 결합해서 사용하기도 했다. Hook은 생명주기 메서드를 기반으로 쪼개는 데 초점을 맞추기보다 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있도록 초점을 맞추었다. (3.. 2021. 2. 22. [react-redux] 5. 요약 (완) 1. reducer 함수 - reducer 함수 속에 저장해둔 과거 state와 현재 값을 가지고 다음 state 만들어 반환한다. 2. store - createStore(reducer) 함수를 통해 해당 reducer state의 저장소를 만든다. 3. Provider - 태그를 통해 해당 store를 Provider 속 컴포넌트 전역과 연결한다. - import store를 하지 않아도 된다. 4. connect - connect(mapStateToProps, mapDispatchToProps)(AddNumber); - AddNumber를 감싼다. - mapStateToProps 함수를 통해 redux state를 가져온다. - mapDispatchToProp 함수를 통해 redux state를 넣.. 2021. 2. 17. [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. 이전 1 2 3 4 5 6 다음 728x90