[React] Component

컴포넌트

앞선 장에서 여러 차례 언급된 컴포넌트에 대해 알아봅시다. 컴포넌트를 한 마디로 정의하자면 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위입니다. 쉽게는 HTML 요소를 반환하는 함수와 같다고 생각해도 됩니다. 따라서 컴포넌트는 독립적이고 재사용 가능한 코드의 조각입니다. 컴포넌트는 종류로는 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.

함수형 컴포넌트

함수형 컴포넌트를 어떻게 사용해야 하는지 예제와 함께 확인해봅시다. 먼저 함수형 컴포넌트를 선언해주고, ReactDOM.render()를 이용해 렌더링을 해주면 됩니다. 매개변수로 함수형 컴포넌트를 <함수 이름 />와 같은 형태로 넘겨주고 요소를 표기할 곳을 함께 넘겨줍니다.

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}
ReactDOM.render(<Introduce />, document.getElementById('root'));

클래스형 컴포넌트

클래스형 컴포넌트도 마찬가지로 렌더링을 해주면 되며 구조만 약간 다릅니다. class 선언 시 React.Component의 메소드들을 사용하기 위해서 extends를 이용해 React.Component를 상속받도록 구현해야 합니다. 상속 시 해당 클래스형 컴포넌트에서 render() 메소드가 구현되어야 하는데 HTML을 반환해주면 됩니다. 아래는 위의 함수형 컴포넌트와 동일한 기능을 합니다.

class Introduce extends React.Component {

render() {

return <h2>Hi, I am elice!</h2>;

}

}

ReactDOM.render(<Introduce />, document.getElementById('root'));

언제 사용하나요?

함수형 컴포넌트와 클래스형 컴포넌트가 언제 사용되는지 알아볼까요? 함수형 컴포넌트는 단순히 HTML UI를 반환하는 간단한 자바스크림트 함수로 자주 사용됩니다. 단순히 데이터를 받고 렌더링을 하면 끝이기 때문에 비상태형 컴포넌트라고도 합니다.

즉, 상태를 사용하지 않고 함수에 대한 결과를 반환하는데, 여기서 상태란 React의 State를 의미하며 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다. 쉽게 말하자면 컴포넌트의 현재 저장된 값이 State라고 보시면 됩니다.

클래스형 컴포넌트는 이러한 논리와 상태를 구현할 때 사용되어 상태형 컴포넌트라고 합니다. HTML을 반환하는 render() 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트가 사용됩니다. 특히 위에서 언급한 State를 사용할 때 반드시 클래스형 컴포넌트로 구현이 되어야 합니다.

DOM 태그

컴포넌트 렌더링 시 넘겨주었던 <함수 혹은 클래스 이름 />은 아래와 같은 엘리먼트를 만들어서 렌더링 시 넘겨줘도 괜찮습니다. 해당 태그를 DOM 태그라고 합니다.

const element = <Introduce />;

이러한 DOM 태그를 아래처럼 정의할 수도 있습니다. name을 엘리먼트에서 함께 넘겨주고 함수형 컴포넌트에서 props를 이용해 넘겨준 name을 받을 수 있습니다. props가 메소드의 매개변수 역할을 한다고 생각하면 됩니다. props에 관한 자세한 사항은 해당 이론 마지막에 추가로 설명하겠습니다.

function Introduce(props) {

return <h1>Hello, {props.name}</h1>;

}

const element = <Introduce name="Elice" />;

ReactDOM.render(

element,

document.getElementById('root')

);