TIL | Component, Props

Component

Component는 재사용 가능한 UI 단위이다.

기존의 작업들에서는 각각의 요소를 만들기 위해서 동일한 코드를 복사 붙여넣는 형식으로 만들었지만 동일 코드가 반복되는 부분을 하나의 component로 만들어서 동일한 디자인의 input이 필요한 곳마다 재사용할 수 있다.

컴포넌트를 하나만 만들고 재사용할 수 있다면 해당 디자인이 바뀌었을 때 css만 변경하면 해당되는 로그인, 회원가입 등의 페이지에 바뀐 디자인이 모두 적용되게 된다.

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

컴포넌트는 함수와 유사하다. 함수도 기능이 독립적이고 재사용 가능하고, input을 받아 return 할 수 있는 것도 유사하다.
React 컴포넌트에서는 input을 props라고 하고 return은 화면에 보여져야 할 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>
  }
}

Components 사용

위 예시처럼 컴포넌트는 함수와 class로 사용할 수 있다. 마치 태그처럼 <Welcome />으로 작성한다.

위에서 정의한 컴포넌트를 사용할 때, 원하는 attribute를 얼마든지 추가할 수 있다. 그러면 Welcome 컴포넌트(함수)에서 parameter로 해당 attribute를 받아서 사용할 수 있다. 이것을 props라고 말한다. props는 property의 줄임말이다.
.으로 속성명에 접근 가능하고, props.속성명으로 속성 값을 가져올 수 있다.

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

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

// 3. 화면에 React 요소 그리기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

1. Welcom 컴포넌트: Welcome 컴포넌트를 사용한 부모에서 name이라는 attribute를 부여했다. props.name의 값을 사용한다.
2. App 컴포넌트를 살펴보면 div로 감싸져있고, <Welcome /> 컴포넌트를 세번 사용했다. name이라는 attribute를 부여했다.
3. ReactDOM.rener() 함수로 React 요소를 그려준다. root라는 id를 찾아서 <App /> 컴포넌트를 그려준다.