Day React 필수 교육

컨셉 하이라이트:

1. ReactDOM.render()
2. React.createElement()
3. React의 Prop
4. React에서 목록에 액세스
6. React의 파괴

1. ReactDOM.render()

React에서 ReactDOM.render() 함수는 React 요소(또는 구성 요소)를 DOM에 렌더링하는 데 사용됩니다. 이 함수는 렌더링할 React 요소와 렌더링하려는 DOM 요소라는 두 가지 인수를 사용합니다.

예) 이 예에서 ReactDOM.render()는 간단한 "Hello, React!"를 렌더링합니다. ID가 root인 DOM 요소에 메시지를 보냅니다. 이는 앱을 DOM에 마운트하기 위해 대부분의 React 애플리케이션에서 볼 수 있는 기본 구조입니다.

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(element, document.getElementById('root'));

2. 리액트.createElement()

React.createElement() 함수는 React 요소를 생성하는 또 다른 방법입니다. 위의 예와 같이 JSX가 요소를 생성하는 가장 일반적인 방법이지만 React.createElement()가 JSX의 기본 메커니즘이므로 이해하는 것이 중요합니다.

예) 이 예에서 React.createElement()는 "Hello, React!"라는 콘텐츠로 h1 요소를 생성합니다. 첫 번째 인수는 요소 유형(이 경우 h1)이고, 두 번째 인수는 소품(여기서는 소품이 없기 때문에 null)이며, 세 번째 인수는 자식입니다. 요소의 내용입니다.

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(element, document.getElementById('root'));

3. React의 소품

Prop("properties"의 약자)는 React의 한 구성 요소에서 다른 구성 요소로 데이터가 전달되는 방식입니다. 읽기 전용이며 다양한 값을 전달하여 구성 요소를 사용자 정의하는 데 도움이 됩니다.

예) 이 예에서 Greeting 구성 요소는 name prop을 수신하고 이를 사용하여 개인화된 메시지를 표시합니다. Props는 React의 핵심 개념으로, 구성 요소를 동적으로 만들고 재사용할 수 있게 해줍니다.

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

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

4. React에서 목록에 접근하기

React에서 목록을 렌더링할 때 일반적으로 배열을 매핑하고 목록의 각 항목에 대한 요소를 반환합니다. React가 목록을 효율적으로 업데이트하고 관리할 수 있도록 key prop을 포함시키는 것이 중요합니다.

예) 이 예에서 ItemList는 items 배열을 prop으로 취하고 배열의 각 항목에 대해 li 고유한 키가 있는 요소.

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' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

5.

React 애플리케이션의 잠재적인 문제를 식별하는 데 도움이 되도록 개발 모드에서 사용할 수 있는 래퍼 구성 요소입니다. 눈에 보이는 UI를 렌더링하지는 않지만 추가 확인 및 경고를 활성화합니다.

예) 애플리케이션(또는 그 일부)을 로 래핑하면 React는 코드가 모범 사례를 따르는지 확인하기 위해 몇 가지 검사를 실행하여 문제를 조기에 발견하는 데 도움을 줍니다. 개발 과정.

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

6. React의 파괴

구조 분해는 배열의 값이나 객체의 속성을 고유한 변수로 풀어낼 수 있는 JavaScript 기능입니다. React에서는 props를 보다 깔끔하게 추출하기 위해 함수형 컴포넌트에서 흔히 사용됩니다.

예) 이 예에서는 props.name에 액세스하는 대신 구조 분해를 사용하여 props 객체에서 직접 이름을 추출하므로 코드가 더 깔끔하고 읽기 쉬워집니다.

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

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

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