[React, 냥짤메이커] React Component가 뭐야?

Component요?

간단하게 말하자면

재사용 가능한 함수!

function sayHello(name, saying) {
	return (
    <div>
      <h2>{name}</h2>
      {saying}
    </div>
    )
}

sayHello('야옹아', '반갑다잉');
sayHello('멍멍아', '산책가자');

혹은

<sayHello name="야옹아" saying="반갑다잉" />
<sayHello name="멍멍아" saying="산책가자" />  

content만 바꿔서 재사용을 쥐리게 한다!!!!
함수 호출식, Tag 사용 둘다 가능하다! 태그로 만드는건 html element처럼 직관적으로 보인다!!
우왕 그럼 property를 다르게 주는 것도 가능하겠네??
당연!!

function nyang(name, age) {
	return (
    <div>
        <sayHello img src="주소1"/>
        <sayHello img src="주소2"/>
    </div>
    )
}

이렇게 하면 각각 다른 사진이 뜨는거다 크어 쩌네

console로 찍어보면, obj로 img가 넘어온 것을 확인할 수 있따!!
와 그럼 모다? 만약 이걸 다른 함수로 넘겨주면 props로 받아서 사용할수도 있다!!

function sayHello(props) {
	return (
    	<li>
      		<img src="props.img">
      	</li>
    );
}

크어.. 지존 짧아지고 지존 재사용 많이할 수 있군아!!!!

악!!맞따

주의할 점

1. component의 함수명은 대문자로 시작한다.
2. arrow function 사용 시 ()와 {}의 사용을 제대로 알아두자

const NyangNyang = () => {
	return (
    	<h1>잘 알아두라구!!</h1>
    );
}

화살표 뒤에 {}가 오면 그 안엔 값을 넣는거다!

const NyangNyang = () => (
	
    	<h1>잘 알아두라구!!</h1>
)

화살표 뒤에 ()가 오면 return을 생략한다! 바로 return한 것과 같은 의미기 때문!!

그럼 어떻게 받아?!

function Nyaong(props) {
	return(
    	<div>
      		<img
              src={props.img} // 2. 여기서 받아줘
              />
      	</div>
    )
}

const app = (
	<div>
    <Nyaong img="이미지 주소오"/> // 1. 여기서 보내고
  	</div>
)

크어..쩌네