연락처 관리자를 구축하여 구성 요소를 만들고, 소품을 사용하여 데이터를 전달하고, 상태를 사용하여 데이터를 관리하는 방법을 알아보세요.

연락처 관리자를 사용하면 연락처 목록을 보고 새 연락처를 목록에 추가할 수 있습니다.



목업을 보면 두 가지 구성 요소가 있다는 것이 이치에 맞습니다.
AddPersonForm: 텍스트 필드와 추가 버튼이 있는 양식입니다.
PeopleList:연락처 목록

이러한 구성 요소를 만들어 보겠습니다.
AddPersonForm은 상태를 사용하여 텍스트 필드의 값을 관리합니다.

function AddPersonForm() {
  const [person, setPerson] = useState("");
}
function handleChange(e) {
setPerson(e.target.value);
}

function handleSubmit(e) {
e.preventDefault();
}
return (
<form onSubmit = {handleSubmit}>
<input type="text"
placeholder="Add new contact"
onChange={handleChange}
value={person} />
<button type="submit">Add</button>
</form>
);
}

지금은 양식이 제출될 때 기본 동작을 방지합니다.

PeopleList는 연락처를 나타내는 배열을 수신하고 페이지에 목록을 렌더링합니다.

function PeopleList(props) {
  const arr = props.data;
  const listItems = arr.map((val, index) =>
    <li Key={index}>{val}</li>
 );
return <ul>{listItems}</ul>;
}

이제 페이지에서 구성 요소를 렌더링하고 몇 가지 초기 데이터를 포함할 수 있습니다.

const contacts = ["James Smith", "Thomas Anderson", "Bruce Wayne"];

const el = (
   <div>
     <AddPersonForm />
     <PeopleList data={contacts} />
   </div>
);

공유 상태

현재 AddPersonForm은 독립적으로 상태를 유지합니다.
양식을 제출할 때 PeopleList에 새 연락처를 추가하려면 어떻게 해야 합니까?

이를 위해서는 구성 요소 간에 상태를 공유해야 합니다. 상태를 부모 구성 요소로 들어 올려서 그렇게 할 수 있습니다. 이는 부모 구성 요소가 구성 요소 간에 공유해야 하는 데이터를 보유함을 의미합니다. 이 경우에는 연락처 목록입니다.

AddPersonForm 및 PersonList를 하위 구성 요소로 포함하고 연락처 목록을 해당 상태로 유지하는 ContactManager라는 상위 구성 요소를 만들어 보겠습니다.

function  ContactManager(props) {
  const [contacts, setContacts] = 
useState(props.data);

return (
  <div>
     <AddPersonForm />
     <PeopleList data={contacts} />
 </div>
);
}

연락처 추가

이제 연락처 상태 배열에 새 사람을 추가하기 위해 ContactManager 구성 요소에 addPerson() 함수를 만들 수 있습니다.

function ContactManager(props) {
  const [contacts, setContacts] =
useState(props.data);

function addPerson(name) {
  setContacts([...contacts, name]);
 }
....
}

하지만 새 사람에 대한 데이터가 저장되어 있는 자식 AddPersonForm 구성 요소에서 이 함수를 어떻게 호출할까요?
props를 사용하여 데이터를 전달한 것처럼 React에서는 함수 참조를 전달할 수 있습니다!

function ContactManager(props) {
  const [contacts, setContacts] =
useState(props.data);

function addPerson(name) {
  setContacts([...contacts, name]);
}

return (
<div>
<AddPersonForm handleSubmit={addPerson} />
<PeopleList data={contacts} />
</div>
);
}

연락처 목록을 PeopleList 구성 요소에 전달하는 것과 유사하게
handleSubmit이라는 소품을 사용하여 AddPerson() 함수를 AddpersonForm에 전달했습니다.

이제 PeopleList는 양식이 제출될 때 받은 handleSubmit 함수를 호출하여 목록에 새 사람을 추가할 수 있습니다.

function AddPersonForm(props) {
  const [person, setPerson] = useState('');

  function handleChange(e) {
   setPerson(e.target.value);
 }
function handleSubmit(e) {
  props.handleSubmit(person);
 setPerson('');
e.preventDefault();
}
return (
     <form onSubmit={handleSubmit}>
     <input type="text"
       placeholder="Add new contact"
      onChange={handleChange}
     value={person} />
    <button type="submit">Add</button>
   </form>
);
}

결론

이 강의에서 중요한 점은 소품을 사용하여 상태뿐만 아니라 상태를 조작할 수 있는 함수도 전달할 수 있다는 것입니다.
이렇게 하면 애플리케이션 상태를 부모에 저장하고 자식 구성 요소가 상태를 사용하고 조작할 수 있습니다.

이제 앱이 전체 기능을 수행하면 일부 CSS 스타일과 검사를 추가하여 빈 연락처가 생성되지 않도록 할 수 있습니다.