안녕하세요 개미 개발자 블로거 개개블입니다ㅋㅋ
React 에서 Parent Component 에서 Child Component 로 데이터를 넘기는것은 간단하죠, React 공식사이트에도 잘 설명이 되어있듯이 props 를 이용해서 그냥 Child 로 보내면 되는데요.
반대로 Child 에서 Parent 로 데이터를 보내는것은 살짝 그지같고 복잡합니다.
제목에 써있는대로 Child 에서 선택한 select 옵션의 값을 Parent로 보내는 작업을 해보죠.
Child 에 select 태그(드랍다운)이 있고 거기서 내가 무엇을 선택했는지 Parent 에서 알기 위한 작업입니다.
3가지 작업으로 나눠서 할텐데요,
1. Child 에서 선택한 select 값을 Child 내의 state에 저장을 하고
2. Parent 에서 Child로 props를 이용해 callback 함수를 보낸 후
3. Child 에서 callback 함수에 state를 담아서 Parent로 전송
이제 하나하나 살펴 보도록 합시다~
1번 코드는 React 공식사이트 https://reactjs.org/docs/components-and-props.html 에서 가져온 코드를 조금 수정한것이고요, 2,3번은 제가 작성했습니다.
참고 블로그
https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17
React 에서 Parent Component 에서 Child Component 로 데이터를 넘기는것은 간단하죠, React 공식사이트에도 잘 설명이 되어있듯이 props 를 이용해서 그냥 Child 로 보내면 되는데요.
반대로 Child 에서 Parent 로 데이터를 보내는것은 살짝 그지같고 복잡합니다.
제목에 써있는대로 Child 에서 선택한 select 옵션의 값을 Parent로 보내는 작업을 해보죠.
Child 에 select 태그(드랍다운)이 있고 거기서 내가 무엇을 선택했는지 Parent 에서 알기 위한 작업입니다.
3가지 작업으로 나눠서 할텐데요,
1. Child 에서 선택한 select 값을 Child 내의 state에 저장을 하고
2. Parent 에서 Child로 props를 이용해 callback 함수를 보낸 후
3. Child 에서 callback 함수에 state를 담아서 Parent로 전송
이제 하나하나 살펴 보도록 합시다~
1번 코드는 React 공식사이트 https://reactjs.org/docs/components-and-props.html 에서 가져온 코드를 조금 수정한것이고요, 2,3번은 제가 작성했습니다.
참고 블로그
https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17
Comments
Post a Comment