06.29 수 React-Bootstrap, Redux

이재빈·2022년 6월 29일

AI스쿨_JS

목록 보기

17/18

상태관리의 필요성

상태관리란?
React에서 State는 component 안에서 관리되는 것
Component간의 정보 공유

자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 => 부모 컨포넌트를 통해 자식 간 주고 받음
자식이 많아진다면 상태 관리가 매우 복잡해진다. = 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. = > Props drilling 이슈

전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결

Redux 리덕스 / 기능 구현

JS 상태관리 라이브러리
node.js모듈
상태관리 툴 종류
react Context, Redux, Mobx

리덕스의 요소들

Provider란?
Provider은 react-redux라이브러리 안에 있는 Component입니다. - 리액트 앱에 스토어를 쉽게 연결하기 위한 컴포넌트 입니다.
combineReducer란?
redux모듈이 제공하는 Function이다.
만든 모든 reducer들을 통합하여 하나의 reducer로 쓰기 위한 함수이다
useSelector란?
redux의 state조회 = 즉, store에 있는 데이터들 조회
const contactList = useSelector((state) => state.contactList);
useDispatch란?
생성한 action 실행

설치하기

npm install redux react-redux (설치)
- react-redux: 리액트 환경에 맞는 리덕스를 사용할수 이게 해주는 것
npx create-react-app (폴더) -> npm install react-bootstrap bootstrap
https://react-bootstrap.github.io/getting-started/introduction/ 출처

Store.js (전역상태 저장소)

reducer으로부터 저장된 값을 저장해두는 것
모든 component가 접근해서 값을 뽑아내주는 것

import {createStore} from 'redux'; <redux에서 store만드는것을 가져오기>
import reducer from './reducer/reducer'; <요청하기 위해 reducer 써야함>
let store = createStore(reducer);
/*store을 만들고, store을 동작시키기 위해  action과 state를 줘야함
 => reducer로 준다. */

store을 만들었다 -> React와 연결해야함 = Provider
provider은 어디서 연결해야하는가?
index.js 파일의

<React.strictMode> 대신에 <Provider store={StorageEvent}>을 넣어준다.

추가
import store from './store' : store에서 가져오기때문에
import {Provider} from 'react-redux'를 추가한다. <Provide>을 쓰니까

Reducer

store에 무엇을 주기위해 reducer가 필요, reducer은 store와 action으로 이루어진다.

state를 쓰기위해서는 initialState해줘야 됨.(문법) initial=초기화

	<script>
	let initialState = {
         contactList:[],
		};
		function reducer(state = initialState, action){
		const {type,payload} = action; //type에 따라 payload들을 진행한다.
   switch(type){ //문법, 어떤 케이스냐에 따라 결과를 나눠주는 것
   case 'ADD_CONTACT': 
       return{
           ...state, //... : (연산자),state가 가지는 모든 속성들을 나타내는 문법
            contactList:[...state.contactList, //state의 속성중 contactList값을 가져오는것
               {   //contactList의 배열에는 name과 phoneNumber가 들어있다.
               name: action.payload.name,
               phoneNumber: action.payload.phoneNumber,
               },
            ], //[]: 배열
           };
   default : //나머지같은 개념
       return {...state};
        }
	 }
 </script>

실습

<script>
import 'bootstrap/dist/css/bootstrap.min.css'; //bootstrap css적용
import {Container, Row, Col} from "react-bootstrap"; //쓰는것들 부트스트랩에서 가져오기
import ContactForm from './components/ContactForm'; //왼쪽
import ContactList from './components/ContactList'; //오른쪽
</script>
     <Container> 
      <Row> 
        <Col>
          <ContactForm></ContactForm>
        </Col>
        
        <Col>
        <ContactList></ContactList>
        </Col>
      </Row>
     </Container>

Form부분

부트스트랩에서 가져와서 우리가 필요한 부분을 고쳐 쓰기

<Form>
  <Form.Group className="mb-3" controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
   <Form.Control type="email" placeholder="Enter email" />
  </Form.Group>
  <Button variant="primary" type="submit">
    Submit
  </Button>
 </Form>

을

   <Form onSubmit={addContact}>
  <Form.Group className="mb-3" controlId="formName">
    <Form.Label>이름</Form.Label>
   <Form.Control 
   type="text" placeholder="이름을 입력해 주세요" 
   onChange={(event) => setName(event.target.value)}/>
    {/*위에서 실행되는 event를 통해서 event에 입력(target)된 값(value)를 읽어서 setname을 줄것이다 .*/}
  </Form.Group>
  <Button variant="primary" type="submit">
    추가
  </Button>
</Form>

TIP

lg={숫자}를 부여해서 공간간 비율을 조정할 수 있다. (중단점에 따른 폭을 지정)

	<Row> 1 : 11 비율로 
       <Col lg={1}>
       <img width={50} src=/>
       </Col>
       <Col lg={11}>
          <div>{item.name}</div>
          <div>{item.phoneNumber}</div>
       </Col>
	</Row>