[TIL] #71. React, Typescript 부모로 props 전달해주기

ceres·2020년 4월 7일
0

TIL

목록 보기
21/34

(20/4/7)

자식 컴포넌트인 <fileupload> 에서 upload 버튼을 클릭해 이미지를 백엔드에게 보낸후 response에 담겨오는 url을 부모 컴포넌트인 <sign-up> 에게 전달해야했다.
부모에서 함수를 만든 후 그 함수를 자식에게 내려주고, 자식이 해당 함수에 값을 넣으면 부모에게 전달되는 형태로 코드를 만들었다.

부모 컴포넌트

먼저 imgStore라는 함수를 만들었다. 이 함수를 자식 컴포넌트에게 전달 해줄 것이다. 함수의 인자로는 img가 들어갔는데, img는 자식 컴포넌트에서 받아올 값이라고 생각하면 된다. img는 url 값이 들어가기 때문에 type을 String으로 지정해주었다.

만든 imgStore함수를 <FileUpload> 컴포넌트를 가져온 곳에 적어준다.

자식 컴포넌트

interface를 사용해서 부모에 있던 imgStore함수를 props로 받는다.

imgStore함수가 필요한 곳에 props.imgStore 를 적어서 사용하면 된다.
나의 경우 back-end response에 담겨있는 url을 함수의 인자로 보내야 했기 때문에
res.data.image_url을 imgStore의 인자로 넣었다.

0개의 댓글