Component

프론트엔드 개발에서 컴포넌트(Component) 라는 단어를 많이 사용한다. 컴포넌트란 재사용 가능한 UI 단위이다.

컴포넌트를 하나만 만들고 여기저기서 재사용한다면 input 디자인이 바뀌었을 때 css 한 줄만 수정하면 바뀐 디자인을 모든 페이지에 반영할 수 있다.

컴포넌트는 독립적이고 재사용가능한 코드로 관리할 수 있다. 하나의 컴포넌트에 필요한 html, css, js 파일을 모두 합쳐서 만들 수 있다.

컴포넌트는 함수와 비슷하다. 함수는 기능이 독립적이고 한 번 선언해두면 필요할 때마다 호출하면서 재사용할 수 있다. 컴포넌트도 함수처럼 input 을 받아서 return 할 수 있다.

React 컴포넌트에서는 input 을 props 라고 말하고 화면에 보여져야할 React 요소가 return 된다.

Component 만들기

React 는 Component 를 만들고 관리하기 좋은 라이브러리이다. React 에서는 컴포넌트를 class나 함수로 만들 수 있다.

함수로 Welcome 컴포넌트 구현하기

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

class 로 Welcome 컴포넌트 구현하기

class 로 컴포넌트를 만드려면 React.Component 를 extends 해야한다. 컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야 하고, return 도 해주어야 한다. render() 메서드를 무조건 정의해야 한다는 말은, component 를 만들 때 필요한 메서드가 원래 더 있다는 말이다. 그런데 그 중에 render() 메스드만 필수 메서드이다.

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

Component 사용하기

컴포넌트는 함수 이름 또는 class 이름 으로 사용할 수 있다. 태그처럼 <Welcome /> 으로 작성한다.

우리가 정의한 컴포넌트를 사용할 때, 원하는 property 를 얼마든지 추가할 수 있다. 그러면 Welcome 컴포넌트에서 parameter로 해당 property를 받아서 사용할 수 있다.

이것을 props 라고 말한다. props 는 property의 줄임말입니다. . 으로 속성명에 접근 가능하고 props.속성명 으로 속성 값을 가져올 수 있다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="wecoder" />
      <Welcome name="John" />
      <Welocme name="Sara" />
    </div>
  );
}

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

1. Welcome 컴포넌트를 사용한 측(부모)에서 name 이라는 property를 부여했다.
2. App 컴포넌트를 보니 div 로 감싸져 있고, 컴포넌틀 세 번 사용했다. name 이라는 property 를 부여해주었다.
3. ReactDOM.render 함수로 React 요소를 그려준다. root 라는 id 를 찾아 컴포넌트를 그려주었다.