프론트엔드 정복하기

... useEffect(() => { console.log("컴포넌트 시작") return () => { console.log("컴포넌트 종료 ") } }, []) ... array dependency를 [ ] 빈 상태로 두면 => componentDidMount와 비슷한 기능을 한다. 컴포넌트를 호출하면 => '컴포넌트 시작' 이 출력된다. return을 사용하면 => componentWillUnmount와 같은 기능을 한다. 컴포넌트가 종료되면 => '컴포넌트 종료'를 출력한다. 여기서, componentWillUnmount란?) 컴포넌트가 소멸된 시점에(DOM에서 삭제된 후) 실행되는 메소드다. 컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.

1) a태그를 클릭하면 => 페이지를 이동시키면서, 페이지를 아예 새로 불러온다. => 리액트 앱의 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게 된다. 2) Link 태그를 클릭하면 => Link태그는 HTML5 History API를 사용해서 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 예제) import {Link} from 'react-router-dom' About 참고 사이트 velog.io/@bigbrothershin/React-Router

Connect, mapStateToProps, mapDispatchToProps 함수는 현재 useDispatch 함수로 간단하게 대체해서 사용할 수 있다. 하지만 이 함수들의 기능을 파악해야 useDispatch로 변경시킬 수 있기 때문에 이 3가지 함수와 인자들에 대해서 공부해보자. thoughtbot.com/blog/using-redux-with-react-hooks : React Hooks와 useDispatch *Connect( ) : Provider 컴포넌트의 하위 컴포넌트들이 Store에 접근하게 만드는 역할을 한다. connect(mapStateToProps, mapDispatchToProps)(Provider 하위 Component) 1. mapStateToProps : connect 함..

[ middleware.js 원문 ] 더보기 import agent from './agent'; import { ASYNC_START, ASYNC_END, LOGIN, LOGOUT, REGISTER } from './constants/actionTypes'; const promiseMiddleware = store => next => action => { if (isPromise(action.payload)) { store.dispatch({ type: ASYNC_START, subtype: action.type }); const currentView = store.getState().viewChangeCounter; const skipTracking = action.skipTracking; action..

1 import { applyMiddleware, createStore } from 'redux'; 2 import { createLogger } from 'redux-logger' 3 import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'; 4 import { promiseMiddleware, localStorageMiddleware } from './middleware'; 5 import reducer from './reducer'; 6 import { routerMiddleware } from 'react-router-redux' 7 import createHistory from 'history/createBrow..

자식 컴포넌트에서 변화되는 state을 부모 컴포넌트에서도 바로 바로 반영받고 싶다면 어떻게 해야 할까? 1. 부모 컴포넌트에서 update 함수를 자식에게 props로 넘겨준다. -update 함수 const [SomeState, setSomeState] = useState("") //state 생성 const updateState = (newCont) =>{ //newContents를 state에 setting하는 함수 생성 setSomeState( newCont ) } //자식 컴포넌트에 update function을 props로 상속한다. 2. 자식 컴포넌트에서 변화하는 state를 부모컴포넌트로부터 상속받은 refreshFunction에 입력해준다. //자식 컴포넌트 //예를 들어 input 태..