※ 이미 공식 홈페이지에 한국어로 번역되어 있으니 원문을 보시는 것을 추천드립니다.
개요
스크립트에서 React를 호출하면 전역 객체에서 사용할 수 있고 npm에서 es6을 사용하면 import를 사용할 수 있고 es5의 경우 require(‘react’)를 사용할 수 있습니다.
요소
React 구성 요소를 사용하면 UI를 재사용 가능한 부분으로 나누고 각 부분을 개별적으로 볼 수 있습니다.
React.Component와 React.PureComponent로 나누어 정의할 수 있습니다.
ES6 클래스를 사용하지 않는 경우 대신 create-react-class 모듈을 사용할 수 있습니다.
React에서 컴포넌트를 정의할 때 포함될 수 있는 함수 형태로도 가능합니다.
반응 항목 만들기
UI 형태를 기술하기 위해 JSX를 사용하는 것이 좋습니다.
JSX는 React.createElement()를 호출합니다.
- 생성요소()
- 생성팩토리()
변환 요소
React는 요소를 편집하기 위한 API를 제공합니다.
- 복제요소()
- isValidElement()
- 어린이 반응
파편
React는 래퍼 없이 여러 요소를 렌더링할 수 있는 구성 요소도 제공합니다.
- 반응 조각
심판
- Reag.GenerateRef
- Reag.Prev.Ref
긴장
Suspense를 사용하면 구성 요소는 렌더링하기 전에 다른 작업이 완료될 때까지 기다립니다.
현재 Suspense는 React.lazy의 동적 로딩만 지원하지만 추후 업데이트될 예정입니다.
- 게으른 반응
- 반응. 긴장
훅
후크는 React 16.8의 새로운 기능입니다.
후크는 클래스를 쓸모 없게 만듭니다.
- 기본 후크
- useState
- useEffect
- useContext
- 추가 후크
- useReducer
- 콜백 사용
- 메모를 사용
- useRef
- useInperativeHandle
- useLayoutEffect
- useDebugValue
- 사용 전환
- 사용 ID
- 라이브러리 후크
- useSyncExternalStore
- useIntertionEffect
참조
반응 요소
이것은 es6 클래스를 사용하여 React 구성 요소를 정의하기 위한 기초입니다.
순수한 구성 요소 반응
React.Component와 유사하지만 Props 및 State와 얕은 비교를 수행하는 shouldCompnentUpdate를 구현합니다.
따라서 복잡한 구조가 포함되면 잘못된 결과가 발생할 수 있습니다.
따라서 사용할 때 주의하십시오.
Reag.memo
React.memo는 HOC에 의해 렌더링된 결과를 저장하고 랩핑하여 성능을 향상시킵니다.
소품이 변경되거나 상태, 리듀서 및 사용된 컨텍스트가 변경되면 다시 렌더링됩니다.
또한 얕은 비교는 1회만 기본 동작이며 추가 비교를 원할 경우 개별 비교 횟수를 입력할 수 있습니다.
function MyComponent(){}
function areEqual(prev, next){
// next가 prev와 동일한 값을 가지면 true, 다르며 false를 반환
}
export default React.memo(MyComponent, areEqual);
이 방법은 성능을 최적화하는 데에만 사용해야 하며 렌더링을 방지하는 데 사용할 경우 오류가 발생할 수 있습니다.
클래스 구성 요소의 shouldComponentUpdate() 메서드와 달리 areEqual 함수는 props가 같으면 true를 반환하고 그렇지 않으면 false를 반환합니다.
이는 shouldComponentUpdate와 반대입니다.
생성요소()
React.createElement(
type,
(props),
(...children)
)
인수로 주어진 유형에 따라 새로운 React 요소를 생성합니다.
유형은 태그 이름, 반응 구성 요소 유형 및 조각 유형일 수 있습니다.
jsx로 작성된 코드는 React.createElement() 형태로 반환되지만 JSX를 사용할 때 React.createElement는 거의 호출되지 않습니다.
복제요소()
React.cloneElement(
element,
(config),
(...children)
)
element 를 기반으로 새로운 React element를 복사하고 반환합니다.
config에는 키, 참조 및 소품이 포함됩니다.
새 요소는 표면적으로 새 소품과 병합된 후 원본의 소품을 유지합니다.
구성에 키나 참조가 없으면 원래 항목이 유지됩니다.
참조는 보존되며 조상이 가질 수 있는 참조를 사용하여 자식에 대한 액세스를 허용합니다.
이 API는 더 이상 사용되지 않는 React.addons.cloneWithProps()를 대체합니다.
생성팩토리()
반응 createFactory(유형)
지정된 유형의 반응 요소를 생성하지만 레거시로 간주되므로 사용해서는 안 됩니다.
isValidElement()
React.isValidElement(object)
개체가 반응 요소인지 확인합니다.
참 또는 거짓을 반환합니다.
어린이 반응
React.Children은 불투명한 데이터 구조인 this.props.children을 처리하기 위한 도우미 함수를 제공합니다.
React.Children.map
React.Children.map(children, function((thisArg)))
자식에 포함된 각 자식에 대해 this가 thisArg 값으로 설정된 함수를 호출합니다.
그러나 children이 null이거나 정의되지 않은 경우 배열 대신 null 또는 undefined가 반환됩니다.
children이 조각인 경우 자식은 개별 자식으로 취급되며 반복되지 않습니다.
React.어린이.영원한 사람
React.Children.forEAch(children, function((thisArg)))
React.Children.map()과 유사하지만 배열을 반환하지 않습니다.
React.아이의 수
React.Children.count(children)
자식에 포함된 구성 요소의 수를 반환합니다.
어린이 전용.반응
React.Children.only(children)
children에 자식이 있는지 확인하고 해당 자식을 반환합니다.
그렇지 않은 경우 오류를 발생시킵니다.
children.react.to.array
React.Children.toArray(children)
각 자식에 할당된 키 배열을 불투명 자식 데이터 구조로 반환합니다.
render()에서 자식 집합을 처리하려는 경우, 특히 전달하기 전에 this.props.children을 자르거나 정렬할 때 사용합니다.
반응 조각
React.Fragment 구성 요소를 사용하면 render() 메서드 내에서 추가 DOM 요소를 만들지 않고도 여러 요소를 반환할 수 있습니다.
<>로도 사용할 수 있습니다.
사용할 수 있습니다.
Reag.GenerateRef
React.createRef는 반응 요소에 ref 속성으로 첨부할 수 있는 참조를 생성합니다.
Reag.Prev.Ref
전달된 ref 속성을 하위 트리의 다른 구성 요소로 전파하는 React 구성 요소를 만듭니다.
게으른 반응
동적으로 로드되는 구성 요소를 정의할 수 있습니다.
그러나 이를 사용하기 위해서는 React.Suspense 구성 요소가 트리의 맨 위에 있어야 합니다.
반응. 긴장
구성 요소가 렌더링되는 동안 대체 구성 요소를 표시하는 역할을 합니다.
향후 가져오기에 사용되지만 현재는 지연 로딩에만 작동합니다.
SSR의 반응 Suspnese
SSR 중에 Suspense를 사용하여 프로그램을 더 작은 덩어리로 나눌 수 있습니다.
구성 요소가 충돌하는 경우 대체를 렌더링하도록 우선 순위가 낮은 작업을 예약합니다.
폴백이 플러시되기 전에 구성 요소가 중단되지 않으면 실제 콘텐츠가 전송되고 폴백이 삭제됩니다.
수화 중 반응 서스펜스
수화는 독립적으로 발생합니다.
그러나 경계에서 이벤트가 발생하면 해당 구성 요소의 우선 순위가 높아집니다.
응답 시작 전환
React.startTransition(callback)
React.startTransition을 사용하면 제공된 콜백 내의 업데이트를 전환으로 표시할 수 있습니다.
그러나 React.useTransition을 사용할 수 없는 경우를 위해 설계되었습니다.