React 서브어셈블리에서 입력한 데이터를 모 어셈블리에 전달합니다.

Data.tsx에서 검색tsx (하위 구성 요소) 에 입력한 값을 사용하고 싶을 때, 이렇게 대응합니다.
모 피쳐 어셈블리에서 입력할 때의 이벤트와 값을 설정합니다.(input 및 onangeSearch)
props에서 하위 구성 요소에 전달되며, 하위 구성 요소의 input 탭에서 받는 input은value ={input} 형식으로 설정되며, onChage 기간에 onChangSearch를 실행할 때 하위 구성 요소에 입력한 값은 부모의 input에 설정됩니다.
Data.tsx

const [input, setInput] = useState("");
const onChangeSearch = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setInput(e.target.value);
    },
    []
 );
 const onClickSearch = () => {
    setSearchResult([]);
    getSortData();
    setInput("");
    setDataShow(true);
  };
 return (
 <Search
   onChangeSearch={onChangeSearch}
   onClickSearch={onClickSearch}
   input={input}
  />
 )

Search.tsx

type PROPS = {
  input: string;
  onChangeSearch: (text: React.ChangeEvent<HTMLInputElement>) => void;
  onClickSearch: () => void;
};

...

const { onChangeSearch, onClickSearch, input } = props;
return (
<input 
  value={input}
  onChange={(e) => onChangeSearch(e)}
  onKeyPress={(e) => {
            if (e.key == "Enter") {
              e.preventDefault();
              onClickSearch();
              blurEvent();
            }
          }}
/>
)