노드 리액트 기초 - 6th Day

 

CSS 프레임워크

→ 일반적인 웹 디자인을 추상화하고 개발자가 웹 앱에서 디자인을 더 쉽게 구현할 수 있도록 하는 코드 라이브러리

→ 사용할 준비가 된 CSS 스타일시트 컬렉션

 

React를 위한 CSS 프레임워크 종류로는

1. Material UI

2. React Bootstrap

3. Semantic UI

4. Ant Design

5. Materialize

··· 등이 있는데, 이 중에서 John Ahn님의 노드 리액트 기초 강의에서는 Ant Design을 사용한다.

 

↓참고 사이트

https://ant.design/

 

 

Ant Design을 사용하기 위해서는 client directory에서 npm install antd --save를 하고 client 폴더에 있는 index.js에 Ant Design의 stylesheet를 import하는 코드를 추가하면 된다. 

//  client/index.js


import 'antd/dist/antd.css';

 

그리고 스타일을 적용하기 위해서는 위 참고 사이트에 들어가서 사이트 상단에 있는 Components 메뉴를 선택하고 원하는 component의 코드를 복사해서 사용하면 된다. 

(스타일 적용은 추후에 개발하면서 진행)

 

 

 

 

Redux

→ 상태 관리 라이브러리

 

일단 여기서 상태(State)라는 것에 대해 알아보자.

React에는 Props와 State가 있는데, 이 둘을 비교해 보면.. 

 

Props

1. Properties를 줄인 말

2. 컴포넌트 간 데이터를 주고받을 때 사용

3. 부모에서 자식 컴포넌트로만 보낼 수 있음

4. 부모 컴포넌트에게 받은 값을 자식 컴포넌트에서 변경할 수 없음

//자식 컴포넌트
<ChatMessages

	//부모로부터 messages와 member라는 데이터를 전달 받음
	messages = {messages} 
    
	currentMember = {member}
    
>

 

State

1. 부모-자식 컴포넌트가 아닌 컴포넌트 내에서의 데이터 전달에 사용

2. 값을 변경할 수 있고, 변경하면 리렌더링 됨

state = {

	message: '',
	
   	attachFile: undefined,
    
    	openMenu: false

}

 

 

 

다음 이미지를 보면 알 수 있듯이 Redux를 사용하면 모든 컴포넌트는 저장소에서 state를 가져온다.

그리고 변경된 컴포넌트는 저장소에 변경된 state를 dispatch하여 다른 컴포넌트가 이 변경된 state를 가져올 수 있다. 

State Tree without/with Redux

 

 

 

Redux는 단일 방향(unidirectional) 데이터 흐름을 가진다.

Redux Data Flow

 

 

Action

→ 무슨 일이 일어났는지(상태) 설명하는 객체(object)

// 42번 article을 like했다는 의미
{ type: 'LIKE_ARTICLE', acticleId: 42 } 

//이름이 Mary이고 id가 3인 유저를 가져오는데 성공했다는 의미
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } } 

//text를 TODO 리스트에 추가했다는 의미
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }

// →Mary가 42번 Article을 like했다

 

 

Reducer

→ 어떻게 변화했는지 설명하는 함수(function)

→ 이전 state와 action object를 받은 후에 next state를 return한다.

(previousState, action) => nextState

 

 

Store

→ State tree 전체를 감싼다. (모든 state를 관리)

→ 메소드를 가진 객체(object)이고, 클래스가 아니다.

→ state는 dispatch를 통한 Action으로 변경할 수 있다.

 

 

 

 

 

이제 본격적으로 Redux를 설치하고 설정해보자.

 

먼저 Redux의 4가지 dependency를 client directory에서 다운받아야 한다. 

 

1. redux     2. react-redux     3. redux-promise     4. redux-thunk

(npm install redux react-redux redux-promise redux-thunk --save를 입력하면 4가지를 한 번에 다운받을 수 있다.)

 

 

이 4가지 중에서 3번과 4번은 redux middleware다. 

 

이 middleware가 필요한 이유는, 기본 redux 저장소(store)는 객체의 Action만 받을 수 있는데 저장소에 항상 객체 형식의 Action이 들어오는 것은 아니고 promise, function 형식으로 들어올 때도 있기 때문이다.

redux-thunk는 dispatch에 function의 형식을 받게 하고, redux-promise는 promise의 형식을 받게 한다. 

 

 

 

설치가 완료되면 다음 코드를 통해 App에다가 redux를 연결시켜줘야한다.

// server/index.js

import { Provider } from react-redux;

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')
    
);

REDUX_DEVTOOLS_EXTENSION을 사용하기 위해서는 Redux DevTools를 다운받아야 한다.

↓ 다운로드 링크 

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en 

 

 

// _reducers/index.js

import { combineReducers } from 'redux';

//import user from './user_reducer';

//import comment from './comment_reducer';



const rootReducer = combineReducers({

      //user,
    
      //comment
    
})

export default rootReducer;

Combine Reducer를 사용하여 Root Reducer에서 User Reducer, Post Reducer, Comment Reducer 등과 같이 다양한 Reducer들을 하나로 합쳐준다.

 

 

Redux Structure

 

 

mapStateToProps()

Redux 저장소(store)에 대한 업데이트를 반영하고 component에 props로 병합하기 위해 Redux 패턴에서 사용된다. 

 

↓참고 사이트 

https://dev.to/terrythreatt/what-is-mapstatetoprops-in-redux-427