컴포넌트 만들기

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

// 2. 클래스형
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}
  • React 관점에서 두 가지 유형의 컴포넌트는 동일하다.
  • 개념적으로 함수같다. ‘props’ 라고 하는 입력을 받고 React 엘리먼트를 반환한다.
  • 클래스 형태의 컴포넌트는 몇 가지 추가 기능이 있다.

props

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
)
  • 사용자 정의 컴포넌트를 발견하면
    • JSX 속성들을 해당 컴포넌트에 단일 객체로 전달.
    • 이 객체를 props라고 한다.

컴포넌트의 이름

  • React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리
    • 예) div
  • 사용자 컴포넌트의 이름은 항상 대문자로 시작해야함.

컴포넌트 합성

<div>
  <Welcome name="Sara" />
  <Welcome name="Cahal" />
  <Welcome name="Edite" />
</div>

props는 읽기 전용

  • 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함.
// 1. 순수 함수
function sum(a, b) {
  return a + b;
}

// 자신의 입력값을 변경하기 때문에 순수 함수가 아님.
function withdraw(account, amount) {
  account.total -= amount;
}

참고자료