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 실행
  

Redux 생성법

• npm install redux react-redux

• react-redux: 리액트 환경에 맞는 리덕스를 사용할 수 있게 해줌.

Redux를 이용해서 전화번호부 만들기

App.js

App.js에서 리액트 부츠스트랩을 설치하기 위해서 터미널을 통해 아래의 부츠스트랩 리액트를 설치하면 된다.

npm install react-bootstrap bootstrap

그리고, App.js 최상단에 부츠스트랩 링크를 걸어둔다. 그러면, 부츠스트랩이 적용된다.

import 'bootstrap/dist/css/bootstrap.min.css';

부츠스트랩과 리덕스는 package-lock.json과 package.json에 추가되기에 걱정 할 필요는 없다.

component 폴더 생성

그리고, src폴더로 들어가서 components 폴더를 생성한다.

그리고, ContactForm.js를 생성한다.

ContactForm.js

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

export default ContactForm;

그 다음으로 ContactList.js를 생성한다.

ContactList.js

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;

//thank you 문순정

작성을 끝냈다면 그 다음에는 SearchBox.js를 생성한다.

SearchBox.js

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;

ContactItem.js

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;

reducer 폴더와 그 안에 reducer.js를 추가한다.

reducer폴더 추가 그리고 reducre.js

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 };
    }
}

export default reducer;

reducer.js를 추가했다면 store.js를 추가한다.

store.js

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

let store = createStore(reducer);

export default store;

index.js

index.js로 가서 아래의 코드로 바꾼다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.css

.title {
  text-align : center;
}

완성

thank you 문순정

2) 학습내용 중 어려웠던 점

이번 수업에서 강사의 지시대로 이행하고 따라했었기에 큰 어려움이 없었지만 부츠스트랩을 리액트에 적용시켰는데, 강사의 컴퓨터는 표시되었지만 내가 사용하던 컴퓨터에는 뒤늦게 나타나는 일이었다. 그 이외에는 어려움이 없었다.

3) 해결방법

그 나마, 해당 수업을 듣는 학생들의 도움을 받았고 나는 학생들의 도움으로 막힌 부분을 넘어갈 수가 있었다.

4) 학습소감

이번 수업은 리액트에 부트스트랩과 리덕스를 응용해서 전화번호부를 만드는 수업이었다. 리액트를 제대로 익히려면 복습은 필수다. 리액트는 2022년 시점으로 리액트의 대표이다. 나는 이 프레임워크를 공부해야 한다.