Component 문법

편리한 Component 문법 사용법

컴포넌트 문법은 리액트에서 긴 HTML을 짧게 축약시켜주는 문법이다.

• 언제쓰나요?

  HTML을 작성할 때는 수 많은 div 태그들을 써야하고, 비슷한 div들이 많은데, 계속 쓰면 HTML자체가 지저분해지기 때문에, Component문법을 사용하는 것 이다.

예를 들어

<div>
  <p>이름: </p>
  <p>나이: </p>
  <p>번호: </p>
</div>

라는 div태그로 감싸진 블럭이 있고 자주 써야할 때 쓴다.

• 어떻게 쓰나요?

1. fucntion을 이용해 함수 하나 작성
2. 함수 안에 return 문을 작성해 원하는 HTML을 담음
3. 하고나서 원하는 곳에서 <함수명><함수명/>으로 부름

Tip. 부를 때 </함수명>만 있어도 불러오긴 한다.

• 주의사항

1. component 만들 때 영어대문자로 보통 쓴다.
2. return() 안엔 html태그들이 평행하게 여러개 들어갈 수 없다.
3. function APP(){} 안에선 만들 수 없다.

위의 내용으로 앞의 div태그를 쉽게 불러와 보자!

function Name(){ 
  return(
    <div>
      <p>이름: </p>
      <p>나이: </p>
      <p>번호: </p>
    </div>
  )
}

을 쓰면 나중에

function App(){
   return(
	 <Name></Name>
   )
}

으로 불러 올 수 있다.