컴포넌트란

컴포넌트(Component)란?

컴포넌트는 일종의 클래스라고 생각하면 됩니다.
일반적인 코딩에서 클래스와 인스턴스가 있듯,
리액트에는 리액트 컴포넌트와 엘리먼트가 있습니다.

차이점이 있다면, 리액트 컴포넌트는 html 태그처럼 쓸 수 있습니다.

예를 들어 NewComponent라는 컴포넌트가 있다면,
<NewComponent />나 <NewComponent></NewComponent> 로 쓸 수 있습니다.
정확한 표현은 아니지만 <h1>, <div>과 같이 일반적인 태그와 같다고 생각하시면 됩니다.

<div>
  <NewComponent>
    <div>
      <h1>Title</h1>
    </div>
  </NewComponent>
</div>

 

컴포넌트는 어떻게 만들까?

컴포넌트를 만드는 방법은 두 가지가 있습니다.
오리지널한 방식인 자바스크립트 클래스로 만들거나,
함수 기반으로 만들 수 있습니다.

우리는 함수형으로 하도록 합니다 ^^

const NewComponent1 = props => {
	return (
    	<div>
        	{props.text}
        </div>
    )
}

const NewComponent2 = props => {
	return (
    	<NewComponent1 text="abc" />
    )
}

 

 

여기서 우리가 주의깊게 볼 점은 세가지 입니다.

1. props가 뭔데?

props는 호출하는 쪽에서 사용하는 쪽에서 전달하는 정보입니다.
NewComponent2에서, NewComponent1을 호출하면서 text="abc"를 같이 전달합니다.
이렇게 태그에 넣어 전달하는 부분이 props입니다.

이렇게 전달받은 정보(props.text)를 NewComponent1에서 사용할 수 있습니다.

 

2. NewComponent2도 컴포넌트이다.

NewComponent2 또한 NewComponent1과 같이 컴포넌트입니다. 다른 곳에서 호출할 수 있습니다.
또한 NewComponent1은 NewComponent2뿐만 아니라, 다른 어느 컴포넌트에서도 사용할 수 있습니다.

 

3. html 태그를 사용할 수 있다. 

컴포넌트 내에서는 다른 html태그를 사용할 수 있습니다.