React 치트 시트: 기능적 구성요소 에디션

반응 치트 시트

React는 처음부터 크게 발전했으며 Hooks의 등장으로 기능적 구성 요소가 React 애플리케이션 구축을 위한 기본 접근 방식이 되었습니다. 이 치트 시트는 React에서 기능적 구성 요소를 사용하기 위한 주요 개념, 기능 및 모범 사례에 대한 개요를 제공합니다.

1. 기능적 구성 요소 기본

기능적 구성요소는 React 요소를 반환하는 일반 JavaScript 함수입니다.

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

2. JSX 사용하기

JSX는 JavaScript 내에서 HTML과 유사한 코드를 작성할 수 있게 해주는 구문 확장입니다.

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to React</h1>
    </div>
  );
};

3. 소품

Prop는 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 데 사용됩니다.

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// Usage
<Greeting name="Alice" />

4. 기본 소품

구성요소에 대한 기본 소품을 정의할 수 있습니다.

const Greeting = ({ name = "Guest" }) => {
  return <h1>Hello, {name}!</h1>;
};

5. useState를 사용한 상태

useState 후크를 사용하면 기능적 구성 요소에 상태를 추가할 수 있습니다.

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

6. 효과 후크: useEffect

useEffect Hook을 사용하면 기능적 구성 요소에서 부작용을 수행할 수 있습니다.

import { useEffect } from 'react';

const DataFetcher = () => {
  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []); // Empty dependency array means it runs once

  return <div>Data fetched. Check console.</div>;
};

7. 조건부 렌더링

특정 조건에 따라 다양한 UI 요소를 렌더링합니다.

const LoginMessage = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
};

8. 목록과 키

데이터 목록을 렌더링하고 키를 사용하여 React가 변경된 항목을 식별할 수 있도록 돕습니다.

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

9. 이벤트 처리

기능적 구성 요소에서 이벤트를 처리합니다.

const Button = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
};

10. 양식 및 제어 구성 요소

제어되는 구성요소로 양식 입력을 처리합니다.

const Form = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted value: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

11. 컨텍스트 API

구성 요소 트리 전체의 상태 관리를 위해 Context API를 사용하세요.

import { createContext, useContext } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const value = 'Hello from context';

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const contextValue = useContext(MyContext);

  return <div>{contextValue}</div>;
};

12. 맞춤형 후크

맞춤형 후크로 재사용 가능한 로직을 생성하세요.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

// Usage
const DataComponent = () => {
  const data = useFetch('/api/data');

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

13. useMemo로 메모하기

비용이 많이 드는 계산을 메모하여 성능을 최적화하세요.

import { useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const expensiveCalculation = useMemo(() => {
    // Assume this is a computationally expensive operation
    return number * 2;
  }, [number]);

  return <div>{expensiveCalculation}</div>;
};

14. 콜백 사용

useCallback을 사용하여 불필요한 재렌더링을 방지하는 기능을 메모하세요.

import { useCallback } from 'react';

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <Button onClick={handleClick} />;
};

15. 사용감소기

useReducer 후크를 사용하여 복잡한 상태 로직을 관리하세요.

import { useReducer } from 'react';

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

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

16. 조각

프래그먼트를 사용하면 DOM에 노드를 추가하지 않고도 여러 요소를 그룹화할 수 있습니다.

const MyComponent = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
};

17. 포털

하위 요소를 상위 구성 요소의 DOM 계층 구조 외부에 있는 DOM 노드로 렌더링합니다.

import { createPortal } from 'react-dom';

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

18. 오류 경계 구성 요소가 있는 오류 경계

오류 경계에는 클래스 구성요소를 사용하세요.

import { Component } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

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

    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

19. React.lazy와 Suspense를 사용한 지연 로딩

구성요소를 동적으로 가져와 초기 로드 시간을 줄입니다.

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

20. 유형 확인을 위한 PropTypes

prop-type을 사용하여 구성 요소 prop 유형을 문서화하고 적용하세요.

import PropTypes from 'prop-types';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

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

기능적 구성요소는 특히 Hooks가 도입한 강력한 기능을 통해 React 애플리케이션을 구축하는 깔끔하고 간단한 방법을 제공합니다. 이 치트 시트는 필수 개념에 대한 빠른 참조를 제공하여 효과적이고 효율적인 React 코드를 작성하는 데 도움이 됩니다.

위 내용은 React 치트 시트: 기능적 구성요소 에디션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!