ins의 React 이해하기

React의 기본을 빠르게 이해할 수 있는 방법을 찾고 계십니까? 긴 튜토리얼에 압도당하시나요? 단 5분이면 대부분의 React 코드를 읽고 이해할 수 있을 만큼 충분히 배울 수 있습니다.

목차

• 리액트란 무엇인가요?
• 핵심 개념
• 공통 패턴
• 모두 합치기
• 그렇습니다!

반응이란 무엇입니까?

React는 버튼이나 양식과 같은 UI를 구축하기 위한 JavaScript 라이브러리입니다.

레고 블록으로 건물을 짓는다고 생각해 보세요. 하나의 큰 성을 만드는 대신 서로 연결되는 작고 재사용 가능한 조각을 사용하여 지을 수 있습니다. React를 사용하면 "컴포넌트"라는 재사용 가능한 부분을 사용하여 웹 인터페이스를 구축할 수 있습니다.

React 코드는 다음과 같습니다.

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

이 특수 구문을 JSX라고 합니다. 이를 사용하면 JavaScript로 HTML과 유사한 코드를 작성할 수 있습니다.

React가 도움이 됩니다:

• 복잡한 UI를 관리 가능한 부분으로 분해
• Virtual DOM 시스템을 활용하여 UI 및 데이터를 효율적으로 처리
• 데이터가 변경될 때마다 자동으로 웹페이지 업데이트

핵심 개념

1. 구성품?

구성요소는 React의 LEGO 블록과 같습니다. 결합할 수 있는 재사용 가능한 UI 요소입니다.

// A simple component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Using it
<Welcome name="Alice" />

2. 소품?

props는 함수 매개변수와 같이 구성요소에 전달되는 데이터입니다.

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<UserCard name="Alice" age={25} />

참고: Prop은 읽기 전용입니다.

3. 상태?

상태는 변할 수 있는 데이터입니다. 변경되면 React는 UI를 자동으로 업데이트합니다.

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

참고: useState(0)는 초기 값 0으로 상태를 설정합니다(후크에 대한 자세한 내용은 아래 참조).

4. 후크?

후크는 구성요소가 React 기능을 사용할 수 있게 해주는 함수입니다. 항상 "사용"으로 시작됩니다.

• useState: 변경되는 데이터(상태)를 관리합니다
  

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

• useEffect: 특정 시간에 코드를 실행하는 경우(예: API 호출)
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

일반적인 패턴

조건부 렌더링

조건에 따라 다른 콘텐츠 표시:

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1>Welcome!</h1>
   : <h1>Please log in</h1>;
}

isLoggedIn이 true이면 "환영합니다!"가 표시되고, 그렇지 않으면 "로그인하세요"가 표시됩니다.

사용법:

<Greeting isLoggedIn={true} />   // "Welcome!"
<Greeting isLoggedIn={false} />  // "Please log in"

이벤트 처리

클릭과 같은 사용자 상호작용 처리:

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

클릭하면 버튼 텍스트가 "ON"과 "OFF"로 전환됩니다.

사용법:

<ToggleButton />  // Shows: "OFF" by default

모든 것을 하나로 합치나요?

다음은 우리가 배운 내용을 사용한 실제 예입니다.

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes === 0 ? '♡' : '?'} {likes > 0 && likes}
    </button>
  );
}

이 LikeButton 구성 요소:

• 초기 좋아요가 소품으로 간주됩니다
• 카운트가 0일 때 빈 하트(♡) 표시
• 좋아요를 누른 경우 숫자와 함께 핑크색 하트(?)가 표시됩니다. 0
• 클릭 시 하트 및 개수 업데이트

사용 예:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

그게 다야! ?

이제 React 기본 사항을 알게 되었습니다! 배울 것이 더 많지만, 보는 대부분의 React 코드를 이해할 수 있습니다.

시작할 준비가 되셨나요?

React 프로젝트를 생성하는 방법에는 여러 가지가 있습니다.

• Next.js: 대부분의 새 프로젝트에 권장되는 풀 스택 React 프레임워크
• Gatsby: 빠른 CMS 지원 웹사이트를 위한 React 프레임워크
• Vite: React를 배우고 단일 페이지 애플리케이션을 구축하는 데 적합한 현대적이고 빠른 빌드 도구

자세한 내용은 여기로

행복한 코딩✨

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