카테고리 없음

typescript props전달방법

nickbegain 2021. 8. 11. 16:04

https://ddeck.tistory.com/56 

 

[React / typescript] typescript 예제 - 떽떽대는 개발공부

2021.03.15 - [React] - [React] typescript 시작하기 - 떽떽대는 개발공부 [React] typescript 시작하기 - 떽떽대는 개발공부 지금까지 포스팅은 javascript 로 react 프로젝트를 구성하는 것이었다. 오늘은 type..

ddeck.tistory.com

[참고하기]

 

 

[예시코드]

1. 부모

import { useState } from 'react';

import SearchModal from '../components/searchModal';

 

function Landing() {

const [isOpen, setIsOpen] = useState('test');

 

const modalOpen = () => {

setIsOpen('change');

}

 

return (

<div>

<button onClick={modalOpen}>modal test</button>

<SearchModal isOpen={isOpen}></SearchModal>

</div >

)

}

 

export default Landing;

 

2. 자식코드

import { Props } from 'react';

import '../css/Modal.css';

 

interface Iprops {

isOpen: string;

}

 

function SearchModal(props: Iprops) {

return (

<>

<div>{props.isOpen}</div>

</>

)

}

 

export default SearchModal;