반응의 주요 개념 || 반응하다

React.js에는 구성 요소 관리, 수명 주기 이벤트 처리 및 후크 작업에 사용할 수 있는 여러 가지 방법이 있습니다. 아래에서는 가장 중요한 방법을 여러 섹션으로 분류했습니다.

1. 컴포넌트 생명주기 방식(클래스 컴포넌트)

React 클래스 구성 요소에는 구성 요소 수명 주기의 특정 시간에 코드를 실행하기 위해 재정의할 수 있는 여러 수명 주기 메서드가 있습니다.

마운트 단계(구성요소 초기화)

• 생성자()

  • 구성요소가 마운트되기 전에 호출됩니다.
  • 상태 초기화 또는 이벤트 핸들러 바인딩에 유용합니다.

• static getDerivedStateFromProps(props, state)

  • 초기 마운트와 후속 업데이트 모두 렌더링 전에 호출됩니다.
  • props를 기반으로 상태를 업데이트할 수 있습니다.

• 렌더링()

  • 클래스 컴포넌트에서 유일하게 필요한 메소드입니다.
  • DOM으로 렌더링될 React 요소를 반환해야 합니다.

• comComponentDidMount()

  • 구성요소가 마운트된 후 즉시 호출됩니다.
  • 데이터 가져오기, 구독 설정 또는 API 호출에 일반적으로 사용됩니다.

업데이트 단계(props 또는 상태 변경으로 인해 다시 렌더링)

• static getDerivedStateFromProps(props, state)

  • (업데이트 중에도 호출됨) props를 기반으로 상태를 업데이트하는 데 사용됩니다.

• shouldComponentUpdate(nextProps, nextState)

  • 재렌더링이 필요한지 결정합니다.
  • 불필요한 렌더링을 방지하여 성능을 최적화하는 데 사용할 수 있습니다.

• 렌더링()

  • (업데이트 중 다시 호출됨)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • 가상 DOM의 변경 사항이 실제 DOM에 적용되기 직전에 호출됩니다.
  • 업데이트 전 정보(예: 스크롤 위치)를 캡처하는 데 유용합니다.

• comComponentDidUpdate(prevProps, prevState, snapshot)

  • 업데이트 후 즉시 호출됩니다.
  • 구성요소가 업데이트된 후 작업을 수행하는 데 유용합니다(예: prop 변경에 따라 API 호출 수행).

마운트 해제 단계(구성 요소 제거 전 정리)

• 컴포넌트WillUnmount()
  • 구성요소가 마운트 해제되고 삭제되기 직전에 호출됩니다.
  • 구독, 타이머 또는 이벤트 리스너를 정리하는 데 유용합니다.

오류 처리

• comComponentDidCatch(오류, 정보)
  • 렌더링 중, 수명 주기 메서드 또는 하위 구성 요소 생성자에 오류가 있는 경우 호출됩니다.
  • 오류 로깅 및 대체 UI 표시에 유용합니다.

2. React Hooks(함수 컴포넌트)

후크는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해주는 React 16.8의 새로운 추가 기능입니다.

기본 후크

• useState(초기 상태)
  • 기능적 구성 요소에 상태를 추가할 수 있습니다.
  • 상태 변수와 이를 업데이트하는 함수를 반환합니다.

  const [count, setCount] = useState(0);

• useEffect(콜백, 종속성)
  • commentorDidMount, componentDidUpdate 및 componentWillUnmount를 결합한 것과 유사합니다.
  • 데이터 가져오기, 구독 또는 DOM 수동 변경과 같은 부작용에 사용됩니다.

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(컨텍스트)
  • Consumer 구성 요소를 중첩하지 않고도 React 컨텍스트를 구독할 수 있습니다.

  const value = useContext(MyContext);

추가 후크

• useReducer(reducer,initialState)
  • 보다 복잡한 상태 로직을 관리하기 위한 useState의 대안입니다.

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback(콜백, 종속성)
  • 참조 평등에 의존하는 하위 구성 요소를 최적화하는 데 유용한 콜백 함수의 메모된 버전을 반환합니다.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo(생성, 종속성)
  • 비용이 많이 드는 계산을 최적화하는 데 사용되는 메모된 값을 반환합니다.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(초기값)
  • 렌더링 간에 유지되는 변경 가능한 참조 객체를 반환합니다.
  • DOM 요소에 액세스하거나 변경 가능한 값을 저장하는 데 유용합니다.

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, 종속성)
  • forwardRef와 함께 ref를 사용할 때 노출되는 인스턴스 값을 사용자 정의합니다.

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect(콜백, 종속성)

  • useEffect와 유사하지만 모든 DOM 변형 후에 동기적으로 실행됩니다.
  • DOM에서 레이아웃을 읽고 동기적으로 다시 렌더링하는 데 유용합니다.

• useDebugValue(값)

  • React DevTools에서 사용자 정의 후크에 대한 라벨을 표시하는 데 사용할 수 있습니다.

  const [count, setCount] = useState(0);

3. 이벤트 처리 방법

React는 일반 DOM 이벤트 처리와 유사하지만 몇 가지 차이점이 있는 이벤트 처리 방법을 제공합니다.

• 클릭
• 변경 시
• 제출 시
• 초점
• 블러 사용
• KeyPress

예:

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. 기타 React 메소드

다음은 유용한 추가 방법입니다.

• React.createRef()

  • 클래스 구성요소에서 참조를 생성하는 데 사용됩니다.

• React.forwardRef()

  • 하위 구성 요소에 참조를 전달합니다.

• React.memo(컴포넌트)

  • props가 변경되지 않은 경우 재렌더링을 방지하는 고차 구성 요소입니다.

• React.lazy()

  • 코드 분할 및 지연 로딩 구성 요소에 사용됩니다.

• 반응.서스펜스

  • React.lazy()와 함께 사용하여 게으른 구성요소를 로드하는 동안 폴백을 표시합니다.

5. React 라우터 방법(라우팅용)

• useNavigate() (React Router v6)
• useParams()
• useLocation()
• useMatch()

예:

  const value = useContext(MyContext);

6. Prop 유형 및 기본 Prop

• propType

  • 구성요소에 전달된 prop 유형을 확인하는 데 사용됩니다.

• defaultProps

  • props의 기본값을 설정하는데 사용됩니다.

예:

  const [state, dispatch] = useReducer(reducer, initialState);

결론

• 클래스 구성요소는 보다 전통적이며 수명 주기 방법을 사용합니다.
• 기능적 구성 요소는 후크를 활용하며 단순성과 성능 이점으로 인해 최신 React 개발에서 일반적으로 선호됩니다.

구성 요소 수명 주기를 세밀하게 제어해야 할 경우 클래스 구성 요소를 사용하고, 더 간단하고 깔끔한 API를 원할 경우 후크를 사용하세요.

위 내용은 반응의 주요 개념 || 반응하다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!