redux 학습

1)학습한 내용
redux 에 대해 배웠는데 redux란
●javaScript 상태관리 라이브러리
Node.js모듈이다
상태관리 틀 종류로

React Context
Redux
Mobx
components간의 정보 공유
자식 컴포넌트들 간의 직접 데이터 전달은 불가능하지만
부모 컴포넌트를 정해서 주고받을 수 있다.

리덕스
Provider란 React-Redux라이브러리 안에 있는 컴포넌트이다.
리엑트 앱에 스토어를 쉽게 연결하기 위한 컴포넌트이다.
combineReducer란
redux 모듈이 제공하는 함수라 한다.
만든 reducer들을 하나로 통합하기 위해 쓰는 함수이다.
use selecter란?
redux의 state조회( 스토어에 있는 데이터를 조회하는 것이다.

Redux생성방법
먼저 npm install redux react-redux라는 명령어를 입력한다.
react-redux라는 부분이 리엑트 환경에맞게 리덕스를 사용할 수 있게 해준다.

Redux를 이욯해서 전화번호입력란 만들기
components 폴더 생성
src폴더로 가서 components 라는 폴더를 생성한다.
그다음 ComponentForm.js라는 파일을 생성한다.

ComponentForm.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.prevenDefault();
    dispatch( {
     type= 'ADD_CONTACT',
     payload:{name,phoneNumber},
     });
     } 
     
     return 
     <Form onSubmit="addContact}>
      <Form.Group className="mb-3" controlled="formName">
      <Form. Label>이름</Form.label>
      <Form.Control
      type="text"
      placeholder="이름을 입력해주세요."
      onChange={(event)=>setName(event.target.value)}
      />
      <Form.Group>
      <Button variant="primart" type="submit">
      추가
      </Button>
      </Form>
      );
      }
exprot default ContactForm;

그 다음으로 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;

다음으로 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>
    </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/commouns/thumb/b/bc/Unknown_person.jpg/925px-Unknown_person.jpg"
           alt=""
           />
           </col>
           <col lg={li>
            <div>{item.name}</div>
            <div>{item.phoneNumber}</div>
            </col>
            </Row>
          );
      };
            exprot contactItem;
           
           
         ```
     reducer v폴더 안에  reducer.js를 작성한다.
     
    let initialState = {
     contactList : [],
     );
     function reducer(state= initalState,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;
  
  
 store.js 를 추가한다
 import { createStore } from 'redux';
 import reducer from'./reducer/reducer';
 let store = createStore(reducer);
 export default store;
 
 index.js
 import  React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import reportwebvistals from './reportWebvistals';
 import store from './store';
 import {Provider} from 'react-redux';
  
  const root=ReactDOM.CreatRoot(document.getElementById('root'));
  root.render(
  <Provider store={store}>
  <App/>
  </Provider>
  );
  App,css
  .title { 
  text-align : center;
  }
 ```
 
 2)학습한 내용중 어려웠던 점
 
 수업시간에 강사님의 진행에 따라 따라갔다.
  코드를 작성하고 리엑트에 적용하고 하는 과정이 어려웠다.
  
  3)해결방법
  복습동영상을 보면서 따라해야겠다.
  
  4) 학습소감
  
  이번 수업시간에 리액트 에 부트스트랩을 적용하고 리덕스를 응용해서 여러가지 버튼과 전화번호부를 만드는 수업을 하였다. 
  완전히 익히려면 복습을 해야겠다고 느꼈다.