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'));
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'));
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'));
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'));
예) 애플리케이션(또는 그 일부)을
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
구조 분해는 배열의 값이나 객체의 속성을 고유한 변수로 풀어낼 수 있는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!