React 기본 2부

다음은 좀 더 발전된 React 개념과 용어입니다.

12. 컨텍스트 API

Context API는 모든 수준에서 수동으로 소품을 전달할 필요 없이 구성 요소 트리를 통해 데이터를 전달하는 방법을 제공합니다. 테마, 인증, 사용자 데이터 등 글로벌 데이터에 유용합니다.

예:

const ThemeContext = React.createContext('light');

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>I am styled by {theme} theme!</button>}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

13. 참고

Ref는 render 메서드에서 생성된 DOM 노드나 React 요소에 액세스하는 방법을 제공합니다. DOM 요소를 직접 수정하거나 포커스를 관리하는 데 자주 사용됩니다.

예:

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

14. 고차 성분(HOC)

HOC는 구성 요소를 가져와 새 구성 요소를 반환하는 함수입니다. 컴포넌트 로직을 재사용하는 데 자주 사용됩니다.

예:

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Rendering component');
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(MyComponent);

15. 리액트메모

React.memo는 컴포넌트를 메모하여 성능 최적화에 도움을 주는 고차 컴포넌트입니다. 소품이 변경되지 않은 경우 구성 요소는 다시 렌더링을 건너뜁니다.

예:

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.text}</div>;
});

16. 사용Reducer Hook

useReducer 후크는 useState의 대안입니다. 특히 상태가 이전 값에 따라 달라지는 경우 더욱 복잡한 상태 논리를 관리하는 데 유용합니다.

예:

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

17. 리액트 프래그먼트

React Fragments를 사용하면 DOM에 추가 노드를 추가하지 않고도 하위 목록을 그룹화할 수 있습니다.

예:

function Table() {
  return (
    <>
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
    </>
  );
}

18. 포털

포털은 상위 구성 요소의 계층 구조 외부에 존재하는 DOM 노드로 하위 항목을 렌더링하는 방법을 제공합니다.

예:

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

19. 오류 경계

오류 경계는 하위 구성 요소 트리의 어느 위치에서든 JavaScript 오류를 포착하고 해당 오류를 기록하며 대체 UI를 표시하는 React 구성 요소입니다.

예:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

20. 지연 로딩

React는 구성 요소의 지연 로딩을 지원합니다. 즉, 필요할 때 구성 요소를 비동기적으로 로드할 수 있어 대규모 애플리케이션의 성능이 향상됩니다.

예:

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

21. 엄격 모드

StrictMode는 애플리케이션의 잠재적인 문제를 강조하기 위한 도구입니다. 눈에 보이는 UI를 렌더링하지 않지만 더 이상 사용되지 않는 수명 주기 방법과 같은 문제를 확인합니다.

예:

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

22. 제어되는 구성 요소와 제어되지 않는 구성 요소

제어되는 구성 요소: React 상태에 의해 값이 제어되는 양식 요소입니다.

제어되지 않는 구성요소: DOM에 의해 값이 처리되는 양식 요소입니다.

Example of Controlled Component:

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Example of Uncontrolled Component:

function UncontrolledInput() {
  const inputRef = useRef(null);

  return <input type="text" ref={inputRef} />;
}

23. 프롭 드릴링

Prop Drilling은 데이터가 여러 수준의 구성 요소를 통해 전달되어 깊게 중첩된 하위 항목에 도달할 때 발생합니다. 이는 Context API 또는 상태 관리 라이브러리를 사용하여 방지할 수 있습니다.

Example of Prop Drilling:

function Grandparent() {
  const name = "John";
  return <Parent name={name} />;
}

function Parent({ name }) {
  return <Child name={name} />;
}

function Child({ name }) {
  return <p>{name}</p>;
}

24. 렌더링 수명주기

React 구성 요소에는 마운트, 업데이트, 마운트 해제 등 다양한 단계에서 호출되는 메서드가 포함된 수명 주기가 있습니다.

수명 주기 메서드(클래스 구성 요소):

1. -ComponentDidMount
2. -ComponentDidUpdate
3. -컴포넌트WillUnmount

예:

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello!</div>;
  }
}

25. useRef 후크

useRef 후크는 다시 렌더링하지 않고 렌더링 간에 값을 유지하는 데 사용됩니다. 일반적으로 DOM 요소에 액세스하거나 변경 가능한 값을 저장하는 데 사용됩니다.

예:

function Timer() {
  const countRef = useRef(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      countRef.current += 1;
      console.log(countRef.current);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <p>Check the console to see the timer.</p>;
}

이러한 추가 개념은 React에 대한 이해를 심화하고 고급 시나리오를 해결하는 데 도움이 됩니다!

위 내용은 React 기본 2부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!