페이지가 하나라는 뜻이며 하나의 페이지 안에서 자바가 필요한 페이지나 정보만 동적으로 그려준다. 리액트는 이런 SPA의 형식이다.
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="number"
placeholder="전화번호를 입력해주세요"
onChange={(event) => setPhoneNumber(event.target.value)}
/>
</Form.Group>
<Button variant="primary" type="submit">
추가
</Button>
</Form>
);
};
export default ContactForm;
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;
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
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;
APP.js
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;
어제보다 조금 더 복잡하게 느껴진다. 늘 오탈자는 조심해야될것같다.