[React] Component와 Props 알아보기

📌 Component

1. 컴포넌트는 독립적인 소프트웨어 모듈이다.

: 소프트웨어 시스템에서 독립적인 업무 또는 기능을 수행하는 '모듈'로서 이후 시스템을 유지보수 하는데 있어 교체 가능한 부품이다.

 

예를 들어, 컴퓨터나 스마트폰과 같은 제품에 문제가 발생하면 해당 부품만 다른 부품으로 바꾸어도 제품은 문제없이 작동하는 원리이다.

 

컴포넌트가 나오게 된 이유는 소프트웨어는 독립적으로 개발되지 않은 경우가 많이 있기 때문이다.

독립적으로 개발되어도 다른 모듈과의 호환을 생각하지 않고 개발을 한다.

이는 결국 소프트웨어의 재사용성을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 된다.

이러한 상황에서 소프트웨어의 재사용성의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술이다.

 

이와 같이 하드웨어처럼 독립적인 기능을 수행하고 이후에 교환될 수 있도록 해야 하는데

해당 컴포넌트를 쓰기 위해 제공해주는 일종의 '장치'가 필요하다.

 

예를 들어, 스마트폰의 배터리 수명이 다 했을 경우 배터리를 새로 구입하여 교체할 것이다.

이때 스마트폰 단자와 배터리 단자가 맞물려야 제 기능을 하기 때문에 스마트폰과 배터리가 각각 독립적으로 문제없이 돌아간다고 가정하면,

상호간의 단자만 규격에 맞을시, 어떠한 배터리를 교환하더라도 스마트폰은 정상 작동을 할 것이다.

이때 배터리 단자가 앞서 말했던 일종의 '장치'가 된다.

 

객체지향 언어에서는 이러한 장치를 인터페이스(interface)로 제공해준다.

인터페이스는 사용자에게 해당 소프트웨어를 쓰기위한 메서드(=장치)를 공개하고,

규격화된 메서드 환경에서 소프트웨어를 개발할 수 있는 환경을 제공해준다.

 

소프트웨어의 세부내용은 인터페이스를 구현받은 클래스가 작성한다.

이렇게 함으로써 객체지향 개념은 정보 은닉 개념을 수행할 수 있을 뿐더러, 각각 독립된 모듈로 소프트웨어를 만들수 있도록 크게 이바지 할 수 있다.

 

2. 컴포넌트는 구현, 명세화, 패키지화, 그리고 배포 될 수 있어야 한다.

 

1) 재사용 부품으로서의 컴포넌트가 되기 위해서는 아래의 내용을 만족해야만 한다.

- 소스코드가 아닌 실행코드 기반으로 재사용할 수 있도록 이미 구현이 완료되어 있어야만 한다.

 

2) 해당 컴포넌트의 용도, 유형, 기술표준과 인터페이스 등에 대한 정보들에 대해서 명세화되어 있어야만 한다.

 

3) 교체가능한 컴포넌트를 개발하기 위해서는 표준(Standart)을 준수하여 개발해야 한다.

 

4) 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화(packing)되어 있어야만 한다.

 

5) 독립적인 업무단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용할 수 있도록 독립적인 배포(deployment) 가능해야만 한다.

 

3. 하나의 컴포넌트는 하나 이상의 클래스로 구성될 수 있다.

: 컴포넌트와 클래스는 다른 개념이다.

하나의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발할 수 있으며 이렇게 개발된 컴포넌트가 실행될 때 해당 컴포넌트의 인스턴스인 컴포넌트 객체가 수행된다.

 

4. 컴포넌트는 인터페이스를 통해서만 접근할 수 있다.

컴포넌트 내의 정보는 외부로부터 모두 숨겨진다.

따라서 외부에서 접근할 수 있도록 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공하고

컴포넌트를 사용하기 위해서는 어떤 인터페이스르 사용해야 하는지 알 수 있다.

 

따라서 인터페이스는 외부와의 연결을 위해 반드시 존재해야만 하며

이처럼 컴포넌트가 내부 정보를 숨기고 인터페이스만 제공함으로써 소프트웨어도 하드웨어처럼 조립 기반으로 갈 수 있게 되는 것이다.

 

// HTML 코드를 하나의 컴포넌트를 상속받는 클래스로 만들 수 있다.
class Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h2>
        world wide web!!
      </header>
    )
  }
}


class Content extends Component {
  render() {
    return (
      <article>
        <h2>HTML></h2>
        Html is HyperText Markup Language.
      </article>
    )
  }
}

class App extends Component {
render() {
  return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    )
  }
}

 

---

📌 Props

: attribute(속성) = props

props는 Immutable Data 즉, 변하지 않는 데이터이다.

 

1. props 사용방법

: <컴포넌트이름 props이름 = “값”> 이렇게 상위 컴포넌트에서 HTML의 attribute를 정의하듯이 하위 컴포넌트의 속성처럼 사용하면 된다.

props를 정의하면 하위 컴포넌트에서 {this.props.props이름}으로 사용할 수 있다.

(함수형 컴포넌트라면 {props파라미터.props이름} 이렇게 사용)

 

// HTML 코드를 하나의 컴포넌트를 상속받는 클래스로 만들 수 있다.
class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h2>
        {this.props.sub}
      </header>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        // 리팩토링한 것
        // 훨씬 더 똑똑한 컴포넌트를 만들 수 있게 된다.
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="React" sub="For UI"></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    )
  }
}

 

2. default props를 지정하는 방법

: 컴포넌트 선언이 끝난 후에 Component.defaultProps = {…} 이렇게 선언하면 된다.

 

3. props type을 검증하는 방법

: default props와 마찬가지로 컴포넌트 선언이 끝난 후 Component.propTypes = {…} 라고 선언하면 된다.

→ props의 값이 필수인지 아닌지, 지정한 타입과 맞는지 아닌지를 검증하여

지정한 type과 틀리다면 console에서 경고 메시지가 나오도록 할 수 있다.

 

4. props의 type을 지정하면

: 유지보수하기에 좋고 자신 이외의 다른 개발자가 코드를 봤을 때 이해가 쉽도록 해주기 때문에

가능하면 props의 type 검증을 해주는 것이 좋다.

 

class Children extends React.Component { // 하위(자식) 컴포넌트
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
        <h2>{this.props.number}</h2>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

// props type 검증
Children.propTypes = {
  name: PropTypes.string, // string 타입
  number: PropTypes.number.isRequired, // number 타입, 필수 값으로 지정
};

// default props 지정
Children.defaultProps = {
  name: 'Unknown' // props를 정의하지 않았을 경우 name props의 기본 값
};

class App extends React.Component { // 상위(부모) 컴포넌트
  render() {
    return (
      <Children number={3}>이 사이에 있는거는 children</Children>
    );
  }
}