Redux

kh0520·2022년 6월 29일

1)학습내용

redux 란?

JavaScript

Node.js모듈

상태관리툴종류
1)React Context
2)Redux
3)Mobx

Provider란?
1) Provider은 react-redux 라이브러리 안에 있는 컴포넌트입니다.
2)리액트앱에 스토어를 쉽게 연결하기 위한 컴포넌트입니다.

combineReducer란?
1)redux 모듈이 제공하는 함수.
2)만든 모든 리듀서들을 통합하여 하나의 리듀서 로 쓰기위한 함수

useSelector란?
1)redux의 state 조회(즉, 스토어에있는데이터들조회)

useDispatch란?
생성한action을 실행

상태관리의 필요성

상태관리

React에서 State는 compnent안에서 관리되는 것
Component간의 정보 공유

자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능

자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.

자식이 많아진다면 상태 관리가 매우 복잡해진다.

상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. (Props drilling 이슈)
전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결

리덕스를 실행시키기 위해서는?

redux 설치
npx install redux react-redux
-react-redux : react 환경에 맞는 리덕스를 사용할 수 있게 해줌

project 만들기:
npx create-react-app projcontact

Redux를 이용해서 만들어보기

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Row, Col } from 'react-bootstrap';
import ContactForm from './components/ContactForm';
import ContactList from './components/ContactList';

function App() {
  return (
    <div className="App">
      <h1 className="title">연락처</h1>
      <Container>
        <Row>
          <Col>
            <ContactForm></ContactForm>
          </Col>
          <Col>
            <ContactList></ContactList>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;

import { createStore } from 'redux';
import reducer from './reducer/reducer';

let store = createStore(reducer);

export default store;

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
import { useDispatch } from 'react-redux';

const ContactForm = () => {
  const [name, setName] = useState('');
  const [phoneNumber, setPhoneNumber] = useState(0);
  const dispatch = useDispatch();

  const addContact = (event) => {
    event.preventDefault();
    dispatch({
      type: 'ADD_CONTACT',
      payload: { name, phoneNumber },
    });
  };

  return (
    <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)}
        />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formContact">
        <Form.Label>전화번호</Form.Label>
        <Form.Control
          type="number"
          placeholder="전화번호를 입력해주세요"
          onChange={(event) => setPhoneNumber(event.target.value)}
        />
      </Form.Group>
      <Button variant="primary" type="submit">
        추가
      </Button>
    </Form>
  );
};

export default ContactForm;

import React from 'react';
import { Row, Col } from 'react-bootstrap';

const ContactItem = ({ item }) => {
  return (
    <Row>
      <Col lg={1}>
        <img
          width={50}
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Unknown_person.jpg/925px-Unknown_person.jpg"
          alt=""
        />
      </Col>
      <Col lg={11}>
        <div>{item.name}</div>
        <div>{item.phoneNumber}</div>
      </Col>
    </Row>
  );
};

export default ContactItem;

코드import React from 'react';
import SearchBox from './SearchBox';
import ContactItem from './ContactItem';
import { useSelector } from 'react-redux';

const ContactList = () => {
  const contactList = useSelector((state) => state.contactList);
  return (
    <div>
      <SearchBox />
      {contactList.map((item) => (
        <ContactItem item={item} />
      ))}
    </div>
  );
};

export default ContactList;
를 입력하세요

import React from 'react';
import { Row, Col, Form, Button } from 'react-bootstrap';

const SearchBox = () => {
  return (
    <Row>
      <Col lg={10}>
        <Form.Control type="text" placeholder="이름을 입력해주세요" />
      </Col>
      <Col lg={2}>
        <Button>찾기</Button>
      </Col>
    </Row>
  );
};

export default SearchBox;