1. 학습내용

오늘은 리덕스(redux)에 관해 잠깐 배워보았다.
-javaScript 상태관리 라이브러리
• Node.js 모듈
• 상태관리 툴 종류

• React Context
• Redux
• Mobx

상태관리의 필요성

• 상태관리

• React에서 State는 component 안에서 관리되는 것
  • Component간의 정보 공유
• 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능
• 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모
  컴포넌트를 통해서 주고 받는다.
• 자식이 많아진다면 상태 관리가 매우 복잡해진다.
• 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다.
  => Props drilling 이슈

리덕스
• Provider란?

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

위에 폼을 만들어 이름과 전화번호가 입력되면 오른쪽에 추가되어 보여지게 끔 해보기로 했다.

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

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;

해당되는 폼과 리스트에 관한 js파일을 따로 작성해 import로 연결해 주었다.

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"/>
         </Col>
         <Col lg={11}>
            <div>{item.name}</div> //작성자 이름
            <div>{item.phoneNumber}</div> //작성자 휴대전화 번호
         </Col>
      </Row>
   );
}

export default ContactItem;

그런다음 관련 리덕스 파일을 만들어 준다.

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

let store = createStore(reducer);
export default store;

입력받은 폼을 배열에 저장해 보여지게끔 해주는 파일이다.

let initialState = {
   contactList: [],
};

function reducer(state = initialState, action){
   const {type, payload} = action;
   switch(type){
      case 'ADD_CONTACT':
            return{
               ...state, 
               contactList:[
                  ...state.contactList,
                  {
                  name: action.payload.name,
                  phoneNumber: action.payload.phoneNumber,
                  },
               ],
            };
         default : 
            return {...state}; // ...은 state가 가지는 모든 속성을 가리킴
   }
}

export default reducer;

import React from "react";
import ContactItem from "./ContactItem";
import SearchBox from "./SearchBox";
import { useSelector } from "react-redux";

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

export default ContactList;

2. 어려웠던 점 및 해결방안

리덕트를 왜 써주는 지는 이해하기 힘들어서 아래 사이트를 보니 이해가 갔다.
예를 들어 Todolist를 만들 경우 해당 입력받은 자료를 저장된 곳에서 불러올려면 부모 컴포넌트가 관리하니 거기서부터 불러오고 하면 되는 간결한 구조이지만, 프로젝트가 규모가 커지면 관리가 어려워지는데 그럴때 리덕트를 쓴다는 골자의 내용이였다.
자세한간 아래 페이지에 잘 설명되어 있으니 참조하면 좋을듯 하다.

출처: https://velopert.com/3528

3. 학습소감

꽤 복잡한 것을 만들어 보았다. 리덕트를 새로 배워보기도 했고..