최근 React Docs 검토에서 얻은 주요 내용

이 블로그는 원래 Medium에 게시되었습니다

안녕하세요, React 매니아 여러분! 저는 최근 React 문서에 대해 자세히 알아보았고 제가 배운 내용을 여러분과 공유하고 싶습니다. 이것은 React에서 탄탄한 기반을 구축하려는 사람들을 위한 간결하고 최소한의 가이드입니다. 간단한 설명과 코드 스니펫으로 핵심 개념을 세분화해 보겠습니다.

좀 긴 이야기가 되겠지만, React의 핵심 개념을 모두 한번에 파악하실 수 있도록 조금만 기다려주세요. 추가 발전을 위해 이러한 개념을 요약하고 다시 검토하는 것이 유익할 것입니다.

목차

• React로 생각하기
• 구성요소와 JSX
• 소품
• 조건부 렌더링
• 렌더링 목록
• 순수 부품
• UI 트리
• 상호작용 및 이벤트 핸들러
• 상태
• 제어 구성요소
• 통제되지 않는 구성요소
• 참고
• 기본 동작 방지
• 이벤트 전파
• 복잡한 상태 관리
• 컨텍스트
• 부작용
• Effect 사용 모범 사례
• React의 규칙
• 맞춤형 후크
• Hook의 규칙

React로 생각하기

React는 UI를 재사용 가능한 구성 요소로 나누는 것입니다. React 앱을 구축할 때 다음부터 시작하세요.

1. UI를 구성 요소 계층 구조로 나누기
2. 상호작용이 없는 정적 버전 구축
3. UI 상태의 최소 표현 식별
4. 주(州)가 거주할 지역 결정
5. 역방향 데이터 흐름 추가

참고자료: https://react.dev/learn/thinking-in-react

컴포넌트와 JSX

구성요소는 React 애플리케이션의 구성 요소입니다. 기능적이거나 클래스 기반일 수 있습니다(구식, 권장되지 않음). JSX는 JavaScript에서 HTML과 유사한 코드를 작성할 수 있게 해주는 구문 확장입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

참고자료:

• 구성요소: https://react.dev/learn/your-first-comComponent
• JSX: https://react.dev/learn/writing-markup-with-jsx

소품

props는 상위 구성요소에서 하위 구성요소로 데이터를 전달하는 방법입니다. 읽기 전용이며 구성 요소를 순수하게 유지하는 데 도움이 됩니다.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

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

참고: https://react.dev/learn/passing-props-to-a-comComponent

조건부 렌더링

React를 사용하면 특정 조건에 따라 구성 요소나 요소를 조건부로 렌더링할 수 있습니다.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

참고: https://react.dev/learn/conditional-rendering

렌더링 목록

React의 요소 목록을 렌더링하려면 map() 함수를 사용하세요. 각 항목에 고유한 열쇠 소품을 추가하는 것을 잊지 마세요.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

참고: https://react.dev/learn/rendering-lists

순수 부품

순수 구성요소는 항상 동일한 props 및 state에 대해 동일한 출력을 렌더링합니다. 예측 가능하고 테스트하기 쉽습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

참고자료: https://react.dev/learn/keeping-comComponents-pure

UI 트리

React는 가상 DOM이라는 UI의 내부 표현을 구축하고 유지합니다. 이를 통해 React는 변경된 실제 DOM 부분만 효율적으로 업데이트할 수 있습니다.

참고: https://react.dev/learn/understanding-your-ui-as-a-tree

상호 작용 및 이벤트 처리기

React는 합성 이벤트를 사용하여 다양한 브라우저에서 일관되게 사용자 상호 작용을 처리합니다.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

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

참고: https://react.dev/learn/responding-to-events

상태

상태는 구성 요소에서 시간이 지남에 따라 변경되는 데이터에 사용됩니다. useState 후크를 사용하여 기능적 구성 요소에 상태를 추가합니다.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

참고자료: https://react.dev/learn/state-a-comComponents-memory

제어되는 구성요소

제어되는 구성요소의 상태는 React에 의해 제어됩니다.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

제어되지 않는 구성 요소

제어되지 않는 구성요소는 DOM에서 직접 상태를 관리합니다.

function PureComponent(props) {
  return <div>{props.value}</div>;
}

참조

Ref는 render 메서드에서 생성된 DOM 노드나 React 요소에 액세스하는 방법을 제공합니다.

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

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

기본 동작 방지

특정 이벤트에 대한 기본 브라우저 동작을 중지하려면 PreventDefault()를 사용하세요.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

이벤트 전파

React 이벤트는 기본 DOM 이벤트와 유사하게 전파됩니다. stopPropagation()을 사용하면 이벤트 버블링을 방지할 수 있습니다.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

복잡한 상태 관리

복잡한 상태 논리에는 useReducer 후크나 Redux 또는 Zustand와 같은 상태 관리 라이브러리를 사용하는 것이 좋습니다.

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

문맥

컨텍스트는 모든 수준에서 수동으로 props를 전달할 필요 없이 구성 요소 트리를 통해 데이터를 전달하는 방법을 제공합니다.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

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

참고: https://react.dev/learn/passing-data-deeply-with-context

부작용

부작용은 데이터 가져오기 또는 DOM 조작과 같이 실행 중인 함수 범위 외부에 영향을 미치는 작업입니다. useEffect 후크를 사용하여 부작용을 관리하세요.

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

useEffect의 모범 사례

1. 항상 종속성 배열에 효과가 의존하는 모든 변수를 포함하세요.
2. 효과의 종속성을 신중하게 고려하여 무한 루프를 방지하세요.
3. useEffect의 반환 함수에서 부작용을 정리합니다.

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

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

참고자료:

• useEffect가 필요하지 않을 수도 있습니다: https://react.dev/learn/you-might-not-need-an- effect
• 효과와 동기화: https://react.dev/learn/synchronizing-with-events
• 반응형 효과의 수명 주기: https://react.dev/learn/lifecycle-of-reactive- Effects

반응의 규칙

1. 구성요소 이름은 항상 대문자로 시작하세요.
2. 자체 닫는 태그를 포함하여 모든 태그를 닫습니다.
3. 소품을 직접 수정하지 마세요.
4. 가능한 경우 구성요소를 순수하게 유지하세요.

참고자료: https://react.dev/reference/rules

맞춤형 후크

사용자 정의 후크를 사용하면 구성요소 로직을 재사용 가능한 함수로 추출할 수 있습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

후크의 규칙

1. 구성 요소의 최상위 수준에서만 후크를 호출하세요.
2. React 함수 구성요소 또는 사용자 정의 후크에서만 후크를 호출하세요.
3. 이러한 규칙을 적용하려면 eslint-plugin-react-hooks를 사용하세요.

참조: https://react.dev/reference/rules/rules-of-hooks

이제 React 여정이 끝났습니다! 기억하세요. 배우는 가장 좋은 방법은 직접 해보는 것입니다. 프로젝트 구축을 시작하고 이러한 개념을 실험해 보세요. 더 자세한 내용이 필요할 때 주저하지 말고 React 문서를 살펴보세요. 즐거운 코딩하세요!

위 내용은 최근 React Docs 검토에서 얻은 주요 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!