React 기본 사항: 구성 요소 간 데이터 전달

React에서 구성 요소 간에 데이터를 전달하는 것은 매우 강력한 개념입니다.

이 기사에서는 다음 두 가지 사항을 살펴보겠습니다.

부모에서 자식에게 데이터 보내기

자식에서 부모에게 데이터 보내기

이 개념에서는 useState 후크를 사용해야 합니다. 당신은 지금까지 그 갈고리를 보지 못했습니다. 나는 그것에 대해 다른 시간에 자세히 쓸 것입니다.

오늘의 결과는 다음과 같습니다.

React에서 상위 구성 요소에서 하위 구성 요소로 데이터 보내기

React에서 가장 손쉬운 데이터 흐름은 상위 구성 요소에서 하위 구성 요소로 데이터를 하향식으로 전달하는 것입니다.

현재 예제를 시작점으로 사용하겠습니다.

Download the GitHub repo

이 리포지토리에서 우리는 몇 권의 책이 있는 간단한 책장을 만듭니다.

마지막 예에서 책을 반복했지만 이 책을 객체로 전달하려고 합니다.

매개변수를 다음과 같이 설정하여 책장으로 전달할 수 있습니다.

<Bookshelf books={books}></Bookshelf>

그런 다음 책꽂이 코드를 다음과 같이 변경하기만 하면 됩니다.

import Book from './Book';

export default function Bookshelf({ books }) {
  return (
    <div>
      {books.map((book) => (
        <Book title={book.title} key={book.id} />
      ))}
    </div>
  );
}

이렇게 하면 데이터가 조금 더 분리되고 이제 고유한 책 세트로 여러 책꽂이를 만들 수 있습니다.

이 작업의 멋진 부분은 특정 작업에서도 수행할 수 있다는 것입니다.
App.js 파일로 돌아가서 내가 의미하는 바를 보여주기 위해 새 상태를 설정해 보겠습니다.

const [books, setBooks] = useState([]);

Note we named this books as well, so rename the top data set as booksData

이제 책을 로드할 버튼onClick을 추가할 수 있습니다.

<button onClick={() => setBooks(booksData)}>Load the books</button>

이제 버튼을 클릭할 때만 책이 로드됩니다.

React에서 하위 구성 요소에서 상위 구성 요소로 데이터 보내기

이제 부모 구성 요소에서 자식 구성 요소로 데이터를 보낼 수 있으므로 다른 방법으로 작동하는 방법을 살펴보겠습니다.

우리가 달성하고자 하는 것은 어떤 책을 클릭했는지 알 수 있는 옵션이 있다는 것입니다.

그러나 이 접근 방식의 경우 부모 구성 요소에 이 데이터를 수신할 수 있는 방법이 있어야 합니다.

실제 책의 부모 역할을 하는 코드Bookshelf.js를 열어 보겠습니다.
현재 책을 추적하기 위해 새 상태를 추가합니다.

const [currentBook, setCurrentBook] = useState('');

그런 다음 설정된 경우 현재 책을 표시할 수 있습니다.

{currentBook && <h1>Currently reading: {currentBook}</h1>}

그리고 우리가 하고 싶은 마지막 일은 set 함수를 다음과 같이 책 구성 요소에 전달하는 것입니다.

<Book
  setCurrentBook={setCurrentBook}
  title={book.title}
  key={book.id}
/>

책 구성 요소 내에서 이 함수를 매개 변수로 받아들여야 합니다.
그리고 onClick 핸들러를 추가하여 이 함수를 호출하고 제목을 다시 전달할 수 있습니다.

export default function Book({ title, setCurrentBook }) {
  return <div onClick={() => setCurrentBook(title)}>{title}</div>;
}

거기 당신이 간다. 이제 두 가지 방법으로 데이터를 바인딩할 수 있습니다.
부모에서 자식으로, 그리고 그 반대입니다.

GitHub에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나