728x90 Front-End39 [React Hook] 3. Effect Hook 출처 공식 문서 : Using the Effect Hook – React (reactjs.org) 1. Effect Hook > componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 > 렌더링으로 완성된 DOM을 조작하는 것. 2. 예시 과거) class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title .. 2021. 2. 23. [React Hook] 2. State Hook 출처 공식 문서 : Using the State Hook – React (reactjs.org) 대표적인 Hook으로 useState 가 있다. 1. state 변수 선언하기 과거) class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } } Hook) import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); } >> 새로운 state 변수 count 를 선언. setCount는 count를 set해주는 함수 이름. > state를 함수 컴포넌트 안에서 사.. 2021. 2. 22. [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. 이전 1 2 3 4 5 ··· 10 다음 728x90