반응형
이번에는 React Component 와 속성에 대해서 알아보겠습니다.
컴포넌트는 UI를 독립적이고, 재사용이 가능한 조직으로 나눌수 있게 해줍니다. 각 컴포넌트는 격리되어 동작합니다.
개념적으로, 컴포넌트는 JavaScript function 와 비슷합니다. 컴포넌트는 입력을 받을 수 있고 (속성), React element 를 반환해 줍니다.
컴포넌트를 정의하는 방법에는 Javascript function로 작성하거나 Class를 이용해서 작성할 수 있습니다. 클래스형의 경우 React.Component를 상속받아서 작성하며, render 메써드를 반드시 정의해 줘야 합니다.
아래는 화면에 Hello 메시지를 표시해주는 컴포넌트의 예시입니다.
함수형 예시
function Welcome(props) {
return <h1> Hello, {props.name}</h1>;
}
클래스형 예시
class Welcome extends React.Component {
render() {
return <h1> Hello, {this.props.name}</h1>;
}
}
이전의 코드를 아래와 같이 변경하면 컴포넌트를 이용한 결과를 확인할 수 있습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Welcome(props) {
return <h1> Hello, {props.name} </h1>;
}
const element = <Welcome name="Maria"/>;
ReactDOM.render(element, document.getElementById('root'));
코드에 대해서 약간의 부연 설명을 하면,
element 생성시,
이전에는 React.createElement 매써드를 사용했었는데, 컴포넌트를 사용할 때는 태그를 이용해서 생성을 하면 됩니다.
속성으로 지정된 name 은 Welcome 이 생성될 때, prop 값에 {name: "Maria"} 형태로 전달이 됩니다.
Welcome 컴포넌트는 받아온 속성을 이용해서 렌더링된 <h1> Hello, Maria </h1> 에 해당하는 엘리먼트를 리턴해 줍니다.
| 참고로 component 이름은 대문자로 시작하는 관습이 있습니다. 예를 들면 컴포넌트 이름을 welcome 으로 하지 말고 Welcome 으로 해야 한다는 것입니다. |
반응형
'프로그래밍 > React' 카테고리의 다른 글
| [React] 시작하기 (0) | 2021.08.20 |
|---|
