[ return 특징 ]

- return은 하나의 <div>만 반환 할 수 있으므로, 여러 개의<div>를 써야할 때는 하나의 <div>로 묶어서 반환해야한다.

[ Component ]

- 코드를 치환하는 느낌
Component는 쉽게 자바에서 메서드와 같은 역할을 한다.
함수코드에 내 마음대로 이름을 지정하여 작성하고 그 코드를 메인 코드에 return하여 HTML코드를 좀 더 간결하게 표현 할 수 있게 해준다.

이 또한 리액트를 이용하는 장점이며 이유이다.

(안드로이드 개발 시, RecyclerView랑 유사)

[ 작성 방법 ]

• 이름 첫 문자는 대문자로 지정.
• return안에 내용은 하나의 태그로 묶어야함.
• div가 귀찮으면 <> </> (Fragment) 로 묶어줘도 된다.

function App() {
    return (
      <div>
      	<p>여기가 메인 코드 작성
      
        <Free/> // 혹은 <Free></Free>
      </div>
    );
}

//App과 같은 위치에 작성.
function Free() {
  return (
    <div>
      <p> 메인에서 호출할 코드
    </div>
  );
}

[ 장 점 ]

• 반복 출현하는 부분을 컴포넌트로 묶어주면 좋다.
• 자주 변경되는 HTML UI들
• 다른 페이지로 나눠 만들 때

[ 단 점 ]

• state 사용시 복잡해짐
  (상위 컴포넌트에서 만든 state를 사용하려면 props 문법을 이용해야 함.)