React 구성요소

React.Component

• ES6 클래스를 사용하여 정의할 때 React 구성요소의 기본 클래스이다.

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

React.PureComponent

• React.Component와 달리 prop와 state 비교를 통해 ComponentUpdate()를 구현해야 한다.
• React 컴포넌트의 render() 함수가 동일한 prop과 state를 제공할 때, React.PureComponent을 사용하면 성능을 향상시킬 수 있다.

React 요소

createElement()

React.createElement(
  type,
  [props],
  [...children]
)

• 주어진 유형의 새 React 요소를 생성하고 반환한다.
• type 인수는 태그 이름 문자열('div', 'span'), React 구성 요소 유형(클래스 or 함수), React Fragment 유형 중 하나이다.

createFactory()

React.createFactory(type)

• 주어진 유형의 React 요소를 생성하는 함수를 반환한다.
• type 인수는 태그 이름 문자열('div', 'span'), React 구성 요소 유형(클래스 or 함수), React Fragment 유형 중 하나이다.
• JSX를 사용하거나 React.createElement()를 직접 사용하는 것이 좋다.

cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

• 요소를 시작점으로 사용해서 새로운 React 요소를 복제하고 반환한다.
• 결과 요소는 원래 요소의 props와 새로운 props가 병합된다.
• 새로운 요소가 이전의 요소를 대체하며, 원래 요소의 key와 ref는 보존된다.

isValidElement()

React.isValidElement(object)

• object가 React 요소인지 확인한 후, true 또는 false를 반환한다.

React.Children

• this.props.Children 불투명 데이터 구조를 처리하기 위한 유틸리티를 제공한다.

React.Children.map

React.Children.map(children, function[(thisArg)])

• children에 포함된 모든 바로 앞 자식에 대한 함수를 호출한다.
• children이 키가 있는 조각이나 배열이면 함수는 통과되지 않는다.
• 자식이 'null' 또는 'undefined'인 경우, 배열이 아닌 'null' 또는 'undefined'를 반환한다.

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

• React.Children.map()과 같지만, 배열을 반환하지 않는다.

React.Children.count

React.Children.count(children)

• 하위 구성 요소의 총 수를 반환한다.
• map 또는 forEach에 대한 콜백 횟수와 같다.

React.Children.only

React.Children.only(children)

• children이 하나의 자식만 있는지 확인하고 반환한다.
• 그렇지 않으면 오류가 발생한다.
• React 요소가 아닌 배열이므로 React.Children.map()의 반환 값을 허용하지 않는다.

React.Children.toArray

React.Children.toArray(children)

• children의 불투명 구조를 각 children에 키가 할당된 플랫 배열로 반환한다.
• render 방식으로 children의 컬렉션을 조작하려는 경우, 특히 this.props.children을 전달하기 전에 순서를 바꾸거나 슬라이스하려는 경우에 유용하다.

React.Fragment

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

• 추가 DOM 요소를 만들지 않고 render() 메서드로 여러 요소를 반환할 수 있다.