리액트 컴포넌트 만들기 [덧붙이기]

이전의 리액트 포스트에서 컴포넌트를 만드는 방법을 포스팅 하였습니다.

https://ktw2408.tistory.com/29

리액트의 컴포넌트 만들기

이에 앞서 컴포넌트가 무엇이고 어디에 쓰이는지에 대해 포스팅 해보도록하겠습니다. 

 

먼저 컴포넌트는 사전적 의미로 "요소" 입니다. 이 요소들의 간략한 예시로는

• 기계를 구성하는 부품이나 해당 기계에서만 동작하도록 제작된 것으로 부터 범용의 기계요소를 포함하는 것
• 전자기기, 전자제품을 이루는 부품
• 컴퓨터 소프트웨어에 있어서 , 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 부품

 등이 있습니다.  웹에서의 컴포넌트 또한 해당 기능들의 나머지를 코드로부터 캡슐화하여 재사용이 가능한 커스텀 엘리먼트를 생성하고 사용할 수 있게 해줍니다. 

 

웹에 대한 컴포넌트는 커스텀 엘리먼트, Shadow DOM, HTML 탬플릿이 있습니다.  

위 세가지의 컴포넌트의 설명은 아래의 링크들을 참고 하시면 됩니다. 

https://developer.mozilla.org/ko/docs/Web/Web_Components

웹 컴포넌트 | MDN

https://d2.naver.com/helloworld/188655

리액트 공식 문서의 React.Component에 따르면 

React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 한다고 하였습니다.

다음의 예시처럼 말이죠

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

해당 코드에서 render()는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드라고 공식 문서에서는 말합니다. 

그리고 이 코드에서 props라는 함수가 보이는데 이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환합니다. 아래의 코드 또한 컴포넌트를 작성하는 방법 중 하나입니다. 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}