[React 주요 개념] 03. Component와 Props

UI를 재사용 가능한 컴포넌트로 나누어 작성할 수 있다.

자세한 컴포넌트 API 레퍼런스) React.Component – React (reactjs.org)

React.Component – React

함수 컴포넌트와 클래스 컴포넌트

Hook이란 개념이 개발되기 전에는 함수 컴포넌트에서는 상태와 라이프사이클 개념이 없었는데,

Hook이 도입되고나서는 함수 컴포넌트에서도 상태와 라이프사이클을 사용할 수 있어 구분이 모호해졌다.

함수 컴포넌트(Function Component)

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

컴포넌트는 개념적으로 JS함수와 유사하므로 함수로 컴포넌트를 작성할 수 있다.

"Props"라는 임의의 입력을 받은 후, 화면에 표시되는 방식을 기술하는 React 엘리먼트를 반환한다.

클래스 컴포넌트(Class Component)

ES6 class를 사용하여 컴포넌트를 정의할 수 있다.

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

// 사용 방법
<Welcome />

React.Component를 상속받아서 사용하며, 반드시 render() 메소드와 return 키워드가 필요하다.

컴포넌트 렌더링

이전까지는 DOM 태그만을 사용해 React 엘리먼트를 나타냈으나 이제는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <div />;
const element = <Welcome name="Sara" />;

React는 사용자 정의 컴포넌트로 작성한 엘리먼트에 JSX 속성(어트리뷰트)과 자식을 해당 컴포넌트에 단일 객체로 전달한다.

즉, 컴포넌트 옆에 추가로 주어진 속성들을 전부 합쳐서 props 객체로 전달해준다.

이를 props라고 한다.

주의
컴포넌트 이름은 무조건 대문자로 시작해야 한다.
소문자로 시작하게 되면 React는 컴포넌트를 DOM 태그로 처리하게 된다.

컴포넌트 합성

컴포넌트는 다른 컴포넌트를 참조할 수 있다.

위처럼 App 컴포넌트에 Welcome 컴포넌트를 여러번 렌더링할 수 있다.

컴포넌트 추출

위 컴포넌트는 author 객체, text 문자열, date 날짜 데이터를 props로 받은 후 처리하는 컴포넌트다.

현재는 구성 요소들이 모두 중첩 구조로 이루어져있어 변경하기 어렵고, 개별 재사용도 어렵다.

Avatar 추출하기

Avatar 입장에서는 Comment 내부에서 렌더링되는 것이므로 컴포넌트의 관점에 맞게 props의 이름을 변경한다.

UserInfo 추출하기

결과

props를 사용하여 코드의 가독성이 올라갔다.

Props는 읽기전용이다.

React에서 엄격하게 적용되는 규칙은 다음과 같다.

함수 또는 클래스 컴포넌트 모두 자체적으로 Props를 수정해서는 안된다.

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

위와 같이 순수 함수 형태로 사용하는 것은 허용되지만,

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

다음과 같이 Props를 직접적으로 재정의 하는 행위는 엄격히 금지하고 있다.