const Parent = () => {
const animal = '호랑이';
return (
<>
<h1>부모 컴포넌트입니다.</h1>
<p>{animal}</p>
<Child pet={animal} englishName="tiger" />
</>
);
};
함수 내에서 animal은 '호랑이' 라고 선언한 후 자식 요소에 컴포넌트로 사용가능
(영어 이름 함수는 따로 animaleng등 으로 선언하는 방법만 있나 궁금함)
const Child = (props) => {
console.log(props); // {pet: '호랑이', englishName: 'tiger'}
return (
<>
<h2>자식 컴포넌트입니다.</h2>
<p>{props.pet}</p> // 호랑이
<p>{props.englishName}</p> // tiger
</>
);
};
객체에 접근하는 방법인 키.값 or 키["값"] 으로 컴포넌트 사용가능.
const Parent = () => {
const testConsole = () => {
console.log('테스트 입니다.');
};
const what = () => {
console,log('what');
}
return (
<>
<h1>부모 컴포넌트입니다.</h1>
<button onClick={testConsole}>클릭</button>
<Child test={testConsole} />
</>
);
};
함수도 컴포넌트로 사용 가능
여러 함수를 포함해야한다면
선언후 onClick={()=>{
testConsole()
what()
}}
으로 띄워주고 얼마든지 사용가능