React 컴포넌트 Component 문법, html 치환하기

React에서는 긴 HTML을 한 단어로 치환할 수 있는 Component 문법을 제공한다

 

function App() {
  return(
    <div>
      123
      <본문></본문>
    </div>
  );
}

function 본문(){
  return (
    <div className="text">
      <h4>제목</h4>
      <p>내용</p>
    </div>
  );
}

이렇게 새로 만든 function 안에서 HTML 내용을 return 해주고

<함수이름></함수이름>, 또는 <함수이름/>으로 태그를 작성하면

만들어뒀던 함수안에 있던 내용들이 그 태그 안으로 들어가게 된다.

 

Component를 만들때는 보통 작명할때 영어 대문자로 시작하는 관습이 있고,

새로 컴포넌트를 만들때는 function App() 밖에서 함수를 만들어야 한다.

 

또한 아래처럼 JavaScript ES6 신문법인 arrow function을 사용해도 된다.

let 본문 = ()=>{
	return (<div> HTML 본문 내용 </div>);
}