[React] Component 사용 방법

간단한 component 사용 방법

 

1. function 을 새로 만들어서 component로 뺄 html을 작성

2. function 이름을 html tag로 삽입

 

function App() {

  return (
    <div className="App">
      <ComponentTest></ComponentTest>
      <ComponentTest />
    </div>
  );
}

function ComponentTest() {

  return (
    <div> 컴포넌트 테스트 !! </div>
  );
}

함수명을 컴포넌트로 사용하기 때문에

리액트에서는 함수가 컴포넌트라고 볼 수 있다.

App 컴포넌트에서 ComponentTest 컴포넌트를 불러오는 예제.

 

주의할 점

1. 컴포넌트 앞글자는 항상 대문자로 해야한다.

<ComponentTest></ComponentTest>
<ComponentTest />

태그를 사용할 때는 위 두가지가 동일하니 편한 방법을 사용하면 됨

 

2. 컴포넌트 간 state를 사용할 때는, props 를 이용하여 변수를 전달해야 함