[React] selectBox 사용하기

🔺 props 사용법 정리하기

컴포넌트로 데이터를 전달하는 방법 정리!
방법에 따라 데이터의 값을 전달받지 못하는 경우가 있었음

✔ 컴포넌트 만들기

카테고리를 선택하는 select box를 만들었다.
선택한 데이터 값을 전달하기 위해 useState 함수를 받아야 한다.

const SelectBox = ({onSelect,props})=>{
    const categories = useSelector(state=>(state.categoryList));
    const [category, setCategory] = useState(props.category);

    const onCategoryHandler = (event) => {
        setCategory(event.currentTarget.value);
        onSelect(event.currentTarget.value);
    }
    return (
        <select className="form-select" onChange={onCategoryHandler} value={category} defaultValue={props.category}>
            <option >--카테고리를 선택해주세요--</option>
            { categories.map((data)=>(
               <option key={data.id} value={data.id}>{data.category_name}</option>
            ))}
        </select>  
    )
}

사용할 때는 다음과 같이 사용한다.

<SelectBox onSelect={onCategorySelector} props={{category:categoryId}}/>

🔺 props 사용하기

props를 통해 컴포넌트에 데이터를 전달해줄 수 있다.

✔ 방법1

만약 아래와 같이 매개변수를 풀어서 정의해줬다면

const SelectBox = ({onSelect,props})=>{

  return()
}

props(key-value)로 묶어서 데이터들을 보내줘야한다.

<SelectBox onSelect={onCategorySelector} props={{category:categoryId}}/>

✔ 방법2

props 하나로 매개변수를 정의해주었다면 아래와 같이 사용할 수 있다.

const SelectBox = (props)=>{
  const {onSelect, categoryId}=props;
  return()
}

데이터를 묶어서 보내지 않아도 된다.

<SelectBox onSelect={onCategorySelector} categoryId={categoryId}/>

❌ 안되는 경우

방법1,2를 섞어서 사용할 수 없다.
error는 발생하지 않지만 categoryId값은 나오지 않는다.

const SelectBox = ({onSelect,categoryId})=>{

  return()
}

<SelectBox onSelect={onCategorySelector} categoryId={categoryId}/>