React - 기초 Component 와 props

컴포넌트란?

---

컴포넌트: React로 화면에 표시되는 부품으로, 표시에 필요한 데이터나 처리 등을 하나의 객체로 정리한 것입니다. 화면에 표시할 부품을 만들어 언제든지 쉽게 통합하여 부품을 재사용할 수 있습니다.

 

함수 컴포넌트

---

컴포넌트에는 몇 가지 작성 방법이 있지만, 먼저 가장 간단한 함수로 컴포넌트를 작성해 보겠습니다. 함수 컴포넌트는 다음과 같이 정의됩니다.

 

function 컴포넌트이름( 인수 ) {
    return ...JSX에의해 표시...;
}

컴퍼넌트로서 함수를 정의하는 경우는, 「표시하는 엘리먼트를 return로 돌려주는」 것이 기본이 됩니다.

 

클래스 컴포넌트

---

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

위의 두 구성 요소는 React 관점에서 동일합니다.

함수 컴퍼넌트와 클래스 컴퍼넌트에는로 각각 몇개의 추가 기능이 있습니다.

 

Props는 읽기 전용

---

컴퍼넌트를 함수로 선언하는지 클래스로 선언하는지 에 관계없이, 자신의 props 는 결코 변경해서는 안됩니다. 이 sum함수를 생각해 봅시다.

function sum(a, b) {
  return a + b;
}

이러한 함수는 입력된 것을 변경하려고 하지 않고, 같은 입력에 대해서 같은 결과를 돌려주기 때문에 “순수(pure)” 라고 말해집니다.

대조적으로, 다음 함수는 자신의 입력을 변경하기 때문에 순수한 함수가 아닙니다.

 

function withdraw(account, amount) {
  account.total -= amount;
}

React는 유연하지만 하나의 엄격한 규칙이 있습니다.

모든 React 컴퍼넌트는, 자신의 props 에 대해서 순함수와 같이 행동해야 합니다.