React - Component의 Props

 

 

Component란?

- 재사용 가능한 UI 단위라 부른다.

 

Component를 왜 사용해야 할까?

만약, '회원정보 페이지'와 '회원정보 수정 페이지' 두 개의 페이지를 만들어야 한다.

Component를 모르면 회원정보 페이지의 html과 css를 작성하고, 회원정보 수정 페이지의 html과 css를 작성할 것이다. 

이렇게 동일한 코드를 두 번 작업하는 것은 상당히 귀찮은 일이다.

이럴 때, 동일한 코드가 반복되는 부분을 하나의 Component로 만들어서 같은 디자인 input이 필요한 곳마다 재사용 한다면 귀찮은 작업을 피할 수 있게 된다.

그렇기 때문에 Component를 써야한다. 

 

Component의 특징

Component는 독립적으로, 재사용이 가능한 코드로 관리할 수 있다.

컴포넌트도 input(입력)을 받아서 return(반환)할 수 있다.

input을 props라고 말하고 return은 화면에 보여야 할 React요소가 return 된다.

 

Component 만들기

React에서는 컴포넌트를 class나 함수로 만들 수 있다.

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

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

 

class로 Hello 컴포넌트 구현하기

class로 컴포넌트를 만들려면, React.Component를 extend 해서 생성한다.

컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야 하며, return도 해줘야 한다.

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

 

Component 사용

위에서 정의한 함수/class 컴포넌트들의 이름을 가지고 태그처럼 사용할 수 있다. ex) <Hello />

정의한 컴포넌트를 사용할 때, 원하는 속성(attribute)을 얼마든지 추가할 수 있다.

이 말은 즉, Hello 컴포넌트에서 속성 값을 받아서 사용할 수 있다는 의미이다.

이것을 React에서 props라고 부른다.

props는 Object이며 .(dot)으로 속성명에 접근 가능하고, props.속성명으로 속성 값을 가져올 수 있다.

예시

결과