[TIL] React 컴포넌트 간 데이터 공유 기본

부모컴포넌트에서 자식컴포넌트로 데이터를 보내는건 쉽게 가능한데

역으로 보내는 건 좀 헷갈려서 확실히 정리해보려고 적어놓는다.!

 

일단 예를 들어, 검색어를 입력하는 박스를 포함하는 컨텐츠 페이지가 있다면

검색어를 입력한 뒤 버튼을 눌러 검색어들에 대한 정보를 넘겨 컨텐츠 페이지에서 결과를 받아내야할 것이다.

 

 

 

ContentPage.tsx

import React, { useState } from "react";
import SearchBox from "./SearchBox";

const ContentPage: React.FC = () => {
  const [searchResults, setSearchResults] = useState([]);
  const [selectedOption, setSelectedOption] = useState<string>("option1");
  const [searchText, setSearchText] = useState("");

  const handleSearch = (selectedOption: string, searchText: string) => {
    // 선택된 옵션과 검색어를 사용하여 검색 결과를 가져옴
    const results = [
     		...
    ];
    setSearchResults(results);
    setSelectedOption(selectedOption);
    setSearchText(searchText);
  };

  return (
    <div>
      <SearchBox
        searchText={searchText}
        setSearchText={setSearchText}
        selectedOption={selectedOption}
        setSelectedOption={setSelectedOption}
        onSearch={handleSearch}
      />
      <div>
        <h2>Search Results for:</h2>
        <p>Selected Option: {selectedOption}</p>
        <p>Search Text: {searchText}</p>
        <ul>
           // 검색 결과 목록 보여주는 곳 (results)
        </ul>
      </div>
    </div>
  );
};

export default ContentPage;

 

메인 페이지에서는 useState를 사용하여 선택된 옵션과 검색어를 상태로 저장하고, 이러한 데이터를 사용하여 검색 결과를 가져온다.

 

SearchBox.tsx

import React, { useState } from "react";

interface SearchBoxProps {
  setSelectedOption: any;
  setSearchText: any;
  selectedOption: string;
  searchText: string;
  onSearch: (selectedOption: string, searchText: string) => void;
}

const SearchBox: React.FC<SearchBoxProps> = ({
  setSelectedOption,
  selectedOption,
  setSearchText,
  searchText,
  onSearch
}) => {
  const handleSearch = () => {
    onSearch(selectedOption, searchText);
  };

  return (
    <div>
      <select
        value={selectedOption}
        onChange={(e: any) => setSelectedOption(e.target.value)}
      >
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

export default SearchBox;

 

암튼 위에서 보낸 것을 해당 컴포넌트에 잘 받아주고, 여기서 검색하는 함수안에 검색값들을 받아준다.

그래서 버튼 클릭시 ContentPage에서 내려받은 함수에 넣어주어 부모컴포넌트로 값을 보내주는 것이다.

state를 이 컴포넌트에서 따로 사용할 수도 있는데 그러면 SearchBox 컴포넌트 내에서 독립적으로 상태를 관리하여

컴포넌트들마다 독립적으로 데이터를 관리하기 더 용이할 수도~ 있으나.. 일반적인 방법은 아니라구함

그리고 검색 버튼을 클릭할 때 업데이트가 발생하게 되어 실시간으로 각 onChange함수가 반영이 되진 않는다.