[노드 리액트 기초 강의] #26 Redux 기초 ~ #28 React Hooks

본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다.

 

#26 Redux 기초

 

Redux는 상태 관리 라이브러리이다. state 컨테이너라고 하는데 state는 props와 비교할 수 있다. props는 부모 컨포넌트에 자식 컨포넌트가 들어갈 때 즉 컴포넌트 간에 소통할 때 props를 이용해야한다. 그리고  props는 부모가 자식에게만 보낼 수 있다. 이렇게 전달한 props는 값을 바꿀 수 없다. 값을 바꾸기 위해서는 부모 컨포넌트가 다른 값을 전달하는 방법밖에 없다. state는 컴포넌트 안에서 데이터를 전달할 때 사용한다. props와는 다르게 값을 바꿀 수 있다.  state의 값이 변할 때마다 리렌더링 된다.

state는 다음과 같이 사용될 수 있다.

state={
	name:"ej",
    age:24,
    gender:"women"
}

Redux는 state를 관리해주는 툴이라고 생각하면 된다. 

 

#27 Redux UP !!!!!

redux를 모두 다운받기 위해 다음을 터미널에서 실행시킨다. 

npm install redux react-redux redux-promise redux-thunk 

그리고 client src index.js에  코드를 다음과 같이 수정한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import 'antd/dist/antd.css';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

ReactDOM.render(
    <Provider
        store={createStoreWithMiddleware(Reducer,
            window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
        )}
    >
        <App />
    </Provider>
    , document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
serviceWorker.unregister();

그리고 _reducer에 index,js 파일을 생성하고 코드를 넣는다.

  
import { combineReducers } from 'redux';
import user from './user_reducer';

const rootReducer = combineReducers({
    user
})

export default rootReducer;

그리고 _reducer 에 user_reducer.js를 생성한다.

 

#28 React Hooks

리액트 컴포넌트는 class 와 function 컴포넌트로 나누어진다. 클래스는 더 많은 기능을 쓸 수 있지만 코드가 길어지고 성능이 느려진다. 반대로 함수 컴포넌트는 기능이 적지만 코드가 간단하고 성능이 좋다. 

mount unmount 같은 훅들은 원래 클래스에서만 사용 가능했는데 hook를 통해 함수 컴포넌트에서도 사용이 가능하게 되었다.