props

홍석현·2022년 11월 2일
0
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()
}}

으로 띄워주고 얼마든지 사용가능

profile
Front-end to Full-stack

0개의 댓글