React 컴포넌트

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

 

내 생각으로는 함수 하나하나가 컴포넌트 인거 같다.

React에서 컴포넌트를 만들려면 제일 첫번째 문자를 대문자로 해야한다.

function Grandfather() {return <Mother/>}
function Mother() {return <Child/>}
function Child() {return <div>자식</div>}

function App() {
  return (
    <Grandfather/>
  );
}

이렇게 여러개의 컴포넌트를 상속 받는 형식으로도 사용할수있다.

 

그렇다면 마구쓰면 어떨까?

function Grandfather() {return <Mother/>}
function Mother() {return <Child/>}
function Child() {return <div>자식</div>}

function App() {
  return (
    <Grandfather/>
    <Mother />
    <Child />
  );
}

리액트는 하나의 html에 컴포넌트를 넣는 형태여서 컴포넌트는 하나의 태그만 반환해야한다.

친절한 에러로 틀린 줄과 설명을 해준다...

function Grandfather() {return <Mother/>}
function Mother() {return <Child/>}
function Child() {return <div>자식</div>}

function App() {
  return (
    <div>
    <Grandfather/>
    <Mother />
    <Child />
    </div>
  );
}

이런식으로 App컴포넌트를 div로 감싸서 하나만 리턴하면 해결된다...

 

너무 어려워!