220629 수

1) 학습한 내용

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;

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

3) 해결방법

4) 학습소감

리액트앱과 스토어를 연결하기위한 리덕스라는 컴포넌트를 배워서 이걸 이용하여 프로젝트를 만들어 보았다.
연락처 등록하는 폼과 연락처 리스트창을 만들어 이름과 전화번호를 추가할수있게 만드실습을 통하여 '리덕스'라는 것을 더 자세히 알게 되었다.
또한, 금일 있을 날씨 앱 만드는 실습도 기대가 된다.