리액트 기본

다음은 예시와 함께 주요 React 용어에 대한 설명입니다.

1. 구성요소

구성요소는 React 애플리케이션의 구성 요소입니다. UI(사용자 인터페이스)의 일부를 반환하는 JavaScript 함수 또는 클래스입니다.

기능적 구성 요소(현대 React에서 흔히 사용됨):

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

클래스 구성요소(이전 스타일):

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2. JSX(자바스크립트 XML)

JSX를 사용하면 JavaScript 내에 HTML과 유사한 구문을 작성할 수 있습니다. React.createElement()의 문법적 설탕입니다.

예:

const element = <h1>Hello, world!</h1>;

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

3. 소품(속성)

Prop은 데이터가 한 구성 요소에서 다른 구성 요소로 전달되는 방식입니다. 읽기 전용이며 구성 요소를 동적으로 사용할 수 있습니다.

예:

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

<Greeting name="Alice" />

4. 주

상태는 동적 데이터를 보유하고 구성 요소의 렌더링된 출력에 영향을 미치는 JavaScript 개체입니다. setState(클래스 구성 요소) 또는 useState 후크(기능 구성 요소)를 사용하여 업데이트할 수 있습니다.

기능적 구성요소의 useState 예시:

import { 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>
  );
}

5. 후크

후크는 기능적 구성요소에서 상태 및 기타 React 기능을 사용할 수 있게 해주는 함수입니다.

useState: 기능적 구성요소의 상태를 관리합니다.
useEffect: 기능적 구성 요소에서 부작용을 실행합니다.

사용예효과:

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

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

  return <h1>{seconds} seconds have passed.</h1>;
}

6. 가상 DOM

가상 DOM은 실제 DOM의 경량 복사본입니다. React는 이를 사용하여 전체 페이지가 아닌 변경된 DOM 부분만 다시 렌더링함으로써 변경 사항을 추적하고 UI를 효율적으로 업데이트합니다.

7. 이벤트 처리

React는 이벤트 핸들러에 소문자 대신 camelCase를 사용하고 문자열 대신 이벤트 핸들러로 함수를 전달합니다.

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

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

8. 렌더링

렌더링은 React가 DOM 요소를 브라우저에 출력하는 과정입니다. 구성 요소는 소품, 상태 및 기타 데이터를 기반으로 UI를 렌더링합니다.

예:

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

9. 조건부 렌더링

조건에 따라 다양한 구성요소나 요소를 렌더링할 수 있습니다.

예:

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

10. 목록 및 키

React에서는 map() 메서드를 사용하여 데이터 목록을 렌더링할 수 있으며, 각 목록 항목에는 고유 키가 있어야 합니다.

예:

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

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

11. 상태 올리기

때로는 여러 구성요소가 동일한 상태를 공유해야 하는 경우가 있습니다. 소품으로 전달될 수 있도록 상태를 가장 가까운 공통 조상으로 "상승"시킵니다.

예:

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

React 개발의 기초를 이루는 기본 개념입니다.

React 기본 2부

프라나브 바카레 ・ 9월 18일

#자바스크립트 #반응하다

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