🐾   자식이 부모에게 props를 이용하여 값 전달하기

컴포넌트를 만들어서 부모 페이지에 내가 만든 컴포넌트를 보이게 하는 건 이해하기 쉬웠지만 정작 컴포넌트(자식)에 있는 값을 부모에게 주는 방법을 할때 마다 이해가 가지 않았다. 이렇게 정리를 하니까 이해할 수 있었다.

Select 사용하기 위한 컴포넌트 (child)

const SelectType = (props) => {
return (
<Select
        placeholder="선택"
        style={{ width: 150, marginLeft: 5, marginRight: 5 }}
        onChange={(value) => {
                    props.id(value)
        }}
>
<Option value={1}>"핸드폰"</Option>
<Option value={2}>"이름"</Option>
<Option value={3}>"제목"</Option>
</Select>
);
};

LIST에 컴포넌트인 SelectType을 가져온다 => 간단히 말해서 부모이다

import SelectType from "../SelectType";
const List = () => {
const [selectId, setSelectId] = useState(0);
return (
<>
<SelectType
        id={setSelectId}
/>
<SearchBox></SearchBox>
<button
        style={{ width: 100, marginLeft: 5, marginRight: 5 }}
        }}
>
    검색
</button>

<Table>
</Table>
</>
);
}
};

• 부모(List)는 그릇을 만들어서 자식에게 준다. 자식은 그릇에 값을 넣어 부모에게 다시 돌려준다.
• List에 const [selectId, setSelectId] = useState(0); 만든다. 그리고 Id라는 걸 자식에게 보낸다
• 그럼 자식은 props.id에 값을 넣어서 부모에게 보낸다. 그럼 자식이 보낸 값이 setSelectId안에 들어가 있다.

​ ​

뭔가 할때마다 헷갈렸는데 이번에 쫌 이해한것 같다!

​ ​ ​