React 최상위 API

React 최상위 API

※ 공식 사이트에 한글로 번역이 이미 되어있으니 원문을 보시는 것을 추천드립니다.

개요

script를 통해서 React를 불러올 경우 전역객체에서 사용할 수 있고, npm에서 es6를 사용 할경우 import, es5일 경우 require(’react’)를 사용하면 됩니다.

컴포넌트

React 컴포넌트를 사용하면 UI를 재사용할 수 있는 부분으로 나누고, 각 부분을 분리하여 생각할 수 있습니다. React.Component와 React.PureComponent로 나누어 정의할 수 있습니다.

ES6 class를 사용하지 않는다면, create-react-class 모듈을 대신 사용해도 됩니다.

또한 React의 컴포넌트를 정의할 때 래핑될 수 있는 함수의 형태로 할 수도 있습니다.

React Element 생성하기

UI형태를 설명하는데 JSX를 사용하는 것을 권장합니다. JSX는 React.createElement()를 호출합니다.

• createElement()
• createFactory()

엘리먼트 변환하기

React는 엘리먼트를 조작하는 API들을 제공합니다.

• cloneElement()
• isValidElement()
• React.Children

Fragments

또한 React는 래퍼없이 여러 엘리먼트를 렌더링할 수 있는 컴포넌트를 제공합니다.

• React.Fragment

Refs

• React.createRef
• React.forwardRef

Suspense

suspense를 사용하면 컴포넌트가 렌더링하기 전에 다른 작업이 먼저 이루어지도록 대기시킵니다. 현재 Suspense는 React.lazy를 동적으로 불러오기만을 지원하지만 추후 업데이트 예정입니다.

• React.lazy
• React.Suspense

Hooks

Hooks는 React 16.8에 새로 추가되었습니다. Hooks를 사용하면 class를 사용하지 않아도 됩니다.

• 기본적인 hooks
  • useState
  • useEffect
  • useContext
• 추가적인 hooks
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useInperativeHandle
  • useLayoutEffect
  • useDebugValue
  • usetransition
  • useId
• LibraryHooks
  • useSyncExternalStore
  • useIntertionEffect

Reference

React.Component

es6 class를 사용하여 React 컴포넌트를 정의할 때 기초가 되는 컴포넌트입니다.

React.PureComponent

React.Component와 비슷하지만, props와 state를 이용한 얕은 비교를 해주는 shouldCompnentUpdate를 구현합니다. 따라서 복잡한 구조가 포함되어 있다면 잘못된 결과를 나타낼 수 있어 사용에 주의해야합니다.

---

React.memo

React.memo는 HOC로 렌더링해낸 결과를 Memoizing하여 래핑하고, 성능을 향상시킵니다.

props가 변할 때나, 내부에서 사용되는 state,reducer,context가 변할 때 다시 렌더링 됩니다.

또한 얕은 비교만 하는 것이 기본 동작이고, 추가적인 비교를 원한다면 별도 비교한 수를 넣으면 됩니다.

function MyComponent(){}

function areEqual(prev, next){
// next가 prev와 동일한 값을 가지면 true, 다르며 false를 반환
}

export default React.memo(MyComponent, areEqual);

이 메서드는 오직 성능 최적화를 위해서만 사용해야하며, 렌더링 방지를 위해 사용한다면 버그가 발생할 수 있습니다.

class 컴포넌트의 shouldComponentUpdate()메서드와 달리 areEqual 함수는props들이 서로 같으면 true, 다르면 false를 반환하는데 이는 shouldComponentUpdate와 반대입니다.

createElement()

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

인자로 주어지는 타입에 따라 새로운 React엘리먼트를 생성합니다. type에는 태그 이름, React 컴포넌트 타입, Fragment타입중 하나가 올 수 있습니다.

jsx로 작성된 코드는 React.createElement()를 사용하는 형태로 반환되는데 JSX를 사용하는 경우 React.createElement를 호출하는 경우가 거의 없습니다.

---

cloneElement()

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

element를 기준으로 새로운 React 엘리먼트를 복사하고 반환합니다. config는 key와 ref 그리고 props를 포함합니다. 새로운 엘리먼트에는 원본이 가졌던 props가 새로운 props와 얕게 합쳐진 뒤 주어집니다. 만약 config에 key와 ref가 없다면 원본 엘리먼트가 유지됩니다.

ref가 유지되어 조상이 가지고있을 ref를 사용하여 자식 엘리먼트에 접근하는 것이 허용됩니다. 이 API는 더이상 사용되지 않는 React.addons.cloneWithProps()를 대체합니다.

createFactory()

React.createFactory(type)

주어진 타입의 React 엘리먼트를 만드나 레거시로 간주되므로 사용하지 말아야합니다.

---

isValidElement()

React.isValidElement(object)

객체가 React 엘리먼트인지 확인합니다. true 또는 false를 반환합니다.

---

React.Children

React.Children는 불투명(Opaque) 자료 구조인 this.props.children를 다루는 유틸리티 함수들을 제공합니다.

React.Children.map

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

children에 포함된 각 자식에 대하여 this를 thisArg의 값으로 설정한 함수를 호출합니다. 단 children이 null이나 undefined인 경우 배열이아닌 null이나 undefined를 반환합니다.

children이 Fragment일 경우, children은 단일 자식으로 취급되어 순회하지 않습니다.

React.Children.forEach

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

React.Children.map()과 비슷하지만, 배열은 반환하지 않습니다.

React.Children.count

React.Children.count(children)

children에 포함된 컴포넌트의 갯수를 반환합니다.

React.Children.only

React.Children.only(children)

children이 하나의 자식을 갖는지 확인하고, 해당 자식을 반환합니다. 아니라면 오류를 발생시킵니다.

React.Children.toArray

React.Children.toArray(children)

각 자식에 key가 할당된 배열을 children 불투명 자료 구조로 반환합니다. render()에서 children의 집합을 다루고 싶을 때, 특히 this.props.children을 하부로 전달하기 전 트리밍하거나 정렬할 때 사용합니다.

---

React.Fragment

React.Fragment 컴포넌트를 사용하면 render() 메서드 안에서 추가적인 DOM엘리먼트를 생성하지 않아도 여러 엘리먼트를 반환할 수 있습니다. <></>로도 사용가능합니다.

React.createRef

React.createRef는 React의 엘리먼트에 ref 어트리뷰트로 붙일 수 있는 ref를 생성합니다.

React.forwardRef

전달받은 ref 어트리뷰트를 하부 트리내 다른 컴포넌트로 전달하는 React 컴포넌트를 생성합니다.

React.lazy

동적으로 불러오는 컴포넌트를 정의할 수있습니다. 단 이를 사용하기 위해서는 트리 상위에 React.Suspense컴포넌트가 존재해야 합니다.

React.Suspense

컴포넌트가 렌더링되는동안 대체 컴포넌트를 보여주는 역할을 합니다. 미래에는 fetch에도 적용할 예정이지만 현재는 lazy loading에만 작동하고 있습니다.

React.Suspnese in SSR

SSR중 suspense를 사용해서 프로그램을 더 작은 덩어리로 나눌 수 잇습니다. 구성요소가 중단되면 fallback을 렌더링하기 위해 우선 순위가 낮은 작업을 예약합니다. 만약 fallback을 플러시 하기전에 구성요소가 중단되지 않으면, 실제 내용을 아래로 보내고 fallback을 버립니다.

React.Suspense during hydration

hydration은 각자 발생합니다. 근데 이벤트가 boundary에 발생시 해당 컴포넌트의 우선순위가 높아지게 됩니다.

React.startTransition

React.startTransition(callback)

React.startTransition을 사용하면 제공된 콜백 내부의 업데이트를 전환으로 표시할 수 있습니다. 단 React.useTransition을 사용할 수 없는 경우에 사용하도록 설계되었습니다.