따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #25-26 Antd Css/Redux 기초

CSS Framework 종류 for React.js

• Material UI
• React Bootstrap
• Semantic UI
• Ant Design
• Meterialize

 

ant Design 설치

C:\practices\react-node\boiler-plate> cd client
C:\practices\react-node\boiler-plate\client> npm i antd

 

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

 

 

client src의 index.js에 antd css를 improt

 

Redux

• 상태관리 라이브러리
• state를 관리해주는 것

 

Props

• properties의 줄임말
• 부모 컴포넌트에서 자식 컴포넌트 간에 주고 받을 때 props 사용
• 위에서 아래로 (부모 => 자식)으로만 전달 가능
• props는 immutable(불변성)임(부모가 1을 내려줬으면 1만 받을 수 있고 2로 바꿀 수 없음)

State

• 컴포넌트 안에서 데이터를 교환하거나 전달 할 때 사용
• state는 mutable이기 때문에 안에서도 값을 변경 시킬 수 있음
• state가 변하면 re-render 됨

Redux가 없을때,

comments라는 컴포넌트가 최상위에서 관리되고 있지만 다른 내부 컴포넌트에서 사용되고 있는 상황에서 작업을 할 경우, 최상위까지 타고 타고 올라오고 그 정보를 또 하나하나 타고 내려줘야 함

 

상위 컴포넌트에 두는 것이 아니라 Redux Store에 저장해두면 타고 올라가지 않고 직접 Redux Store에 접근해서 사용 가능

 

 

Redux 데이터 Flow(strict unidirectional data flow)

React component => Dispatch(action) => ACTION => REDUCER => STORE => Subscribe => React Component

 

Action : 무엇이 일어났는지 설명

Reducer : 이전 state와 action object를 받은 후에 다음 state를 리턴

Store : 전체적인 어플리케이션의 state를 감싸는 역할