[React] 매개변수 props

const App = () => {
    const [searchValue, setSearchValue] = useState("");
    
    return (
        <div className="container-fluid movie-app">
            <div className="row">
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue}/>
            </div>
        </div>
    );
}
export default App;

const SearchBox = (props) => {
    return (
        <div className="col col-sm-4">
            <input
                onChange={(event) => props.setSearchValue(event.target.value)}
                value={props.value}
            />
        </div>
    )
}

export default SearchBox;

SearchBox 컴포넌트에서 props라는 매개변수를 사용하면, 부모 컴포넌트에서 전달한 모든 props가 이 객체에 포함된다.

const SearchBox ({searchValue, setsearchValue}) {...}
=> const SearchBox ({props}) {...}

컴포넌트 내에서 props.setSearchValue와 props.searchValue로 각각의 값을 사용할 수 있다.