Component , Props

songsong·2020년 4월 17일
0

React

목록 보기
3/11
post-thumbnail

📖 Component, Props

1. Component 정의

👉 컴포넌트(Component)는 UI를 구성하는 조각(piece)에 해당되며, 독립적으로 분리되어 재사용을 됨을 목적으로 사용된다. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리한다.

2. Function Component

👉 React 컴포넌트는 개념상 JavaScript 함수와 유사하다. 컴포넌트 외부로부터 속성(props)을 전달 받아 어떻게 UI를 구성해야 할지 설정하여 React 요소(JSX를 Babel이 변환 처리)로 반환한다. 이러한 문법 구문을 사용하는 컴포넌트를 React는 '함수형(functional)'으로 분류한다.

✍ Exmple

function BaseButton(props) {
  return (
    <button type={props.type || 'button'} className="base-button">
      {props.children}
    </button>
  )
}

export default BaseButton

3. Class Component

👉 ES6 부터 지원되는 클래스 문법을 사용해 컴포넌트를 정의할 수도 있다. 클래스 문법을 사용하면 아래와 같이 작성할 수 있다.

✍ Exmple

class BaseButton extends Component {
  render() {
    const { type, chilren } = this.props
    return (
      <button type={type} className="base-button">
        {chilren}
      </button>
    )
  }
}

export default BaseButton

4. Function Component VS class Component

👉 React 세계관에서 함수형과 클래스 컴포넌트 유사하다. 하지만 함수형 컴포넌트에 없는 기능을 추가적으로 클래스형 컴포넌트에서 사용할 수 있다.

📄 Function Component
this 키워드 사용 불가능

📄 Class Component
this 키워드 사용 가능, 상태(state) 및 라이플 사이클(LifeCycle) 훅 (hoop)설정 가능.

5. props 정의

👉 컴포넌트에 설정된 임의의 JSX 속성(type, children 등)은 React에 의해 컴포넌트에 속성(props) 객체로 전달한다.
👉 전달된 전달된 값은 props 객체의 각 속성으로 설정된다.
👉 전달된 컴포넌트 속성 객체 props는 컴포넌트 내부에서 컴파일에 활용된다.

📌컴포넌트에 전달된 속성(props) 객체는 읽기 전용(readonly)이다. 다시 말해 전달 받은 속성 값을 수정하면 안된다는 말이다. 전달 받은 속성 값을 수정하는 대신 컴포넌트 상태(state)를 활용해야 한다.

0개의 댓글