자식이 부모에게 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안에 들어가 있다.

 

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