ReactJS 기본 개념

소품 유형

props에서 수신하는 모든 데이터의 유효성을 검사하기 위해 propType을 사용할 수 있습니다. propTypes는 키가 소품 이름이고 값이 유형인 객체이기도 합니다. 아래 구문은 propTypes를 사용하는 방법을 보여줍니다.

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string
};

상태/소품

Props는 속성의 약자로 React 구성 요소 간에 데이터를 전달하는 데 사용됩니다. 컴포넌트 간의 React의 데이터 흐름은 단방향(부모에서 자식으로만)입니다. React에는 state라는 또 다른 특별한 내장 객체가 있어서 구성 요소가 데이터를 생성하고 관리할 수 있습니다. 따라서 props와 달리 구성 요소는 상태와 함께 데이터를 전달할 수 없지만 내부적으로 생성하고 관리할 수 있습니다.

JSX

이것은 React의 간단한 JSX 코드입니다. 그러나 브라우저는 유효한 JavaScript 코드가 아니기 때문에 이 JSX를 이해하지 못합니다. 이는 문자열이 아니라 HTML 코드일 뿐인 변수에 HTML 태그를 할당하기 때문입니다.

const jsx = <h1>This is JSX</h1>

구성 요소 수명 주기

구성 요소가 생성되고(DOM에 마운트됨), 업데이트를 통해 성장한 다음 죽습니다(DOM에서 마운트 해제됨). 이를 구성 요소 수명 주기라고 합니다. 컴포넌트 수명의 여러 단계에서 React가 제공하는 다양한 수명 주기 메서드가 있습니다. React는 컴포넌트가 있는 단계에 따라 자동으로 담당 메소드를 호출합니다.

후크

후크는 함수 구성 요소에서 React 상태 및 수명 주기 기능을 "연결"할 수 있도록 하는 기능입니다. Hook은 클래스 내에서 작동하지 않습니다. Hook을 사용하면 클래스 없이 React를 사용할 수 있습니다.

사용자 정의 후크

Custom Hook은 다른 JavaScript 함수 간에 로직을 공유하고 싶을 때 스스로 생성하는 JavaScript 함수입니다. 이를 통해 앱의 여러 부분에서 일부 코드를 재사용할 수 있습니다.

컨텍스트 API

React Context API는 React 앱이 전달할 수 있는 전역 변수를 효과적으로 생성하는 방법입니다. 이것은 "소품 드릴링"또는 조부모에서 자식, 부모 등으로 소품을 이동하는 대신 사용할 수 있습니다. 컨텍스트는 Redux를 사용한 상태 관리에 대한 더 쉽고 가벼운 접근 방식으로 선전됩니다.

가상 DOM

깔끔한 개념입니다. 오류가 발생하기 쉽고 변경 가능한 상태에 의존하는 DOM을 직접 조작하는 대신 Virtual DOM이라는 값을 출력합니다. 그런 다음 가상 DOM은 현재 DOM을 새 DOM처럼 보이게 하는 DOM 작업 목록을 생성하는 DOM의 현재 상태와 다릅니다. 이러한 작업은 일괄 처리로 빠르게 적용됩니다.