React 요소 대 React 구성 요소
2891 단어 webdevreactjavascript
대부분의 개발자는 자신의 프로젝트에서 React를 사용하지만 때로는 이해하기 위해 깊은 통찰력이 필요할 수 있는 작은 것들을 무시하는 경우가 많습니다.
React에 대한 이러한 개념 중 하나는 React Elements 및 Component 차이점입니다.
차이점을 살펴보겠습니다.
반응 요소:
React Element는 react element의 type과 그것이 가질 수 있는 props, 그리고 자식들에 대한 정보를 가지고 있는 객체입니다.
태그가 'h1'이고 태그 사이의 텍스트가 "Hello world"인 반응 요소가 있다고 가정해 보겠습니다. 이 시나리오에서 이전에 객체라고 말한 React 요소는 다음과 같이 표현됩니다.
이것은 반응 트리에 저장될 표현입니다.
const reactElement = {
type: 'h1',
null,
'Hello world',
};
해당 반응 요소를 생성하려면 아래와 같이 반응의 createElement API를 사용합니다.
React.createElement('h1', null, 'Hello world');
JSX를 사용하여 동일한 것을 만들 수 있습니다.
<h1>Hello world</h1>
이제 위의 동일한 요소를 여러 위치에 만들어야 하고 이러한 여러 용도가 있다고 가정해 보겠습니다. 이 경우 함수를 만들고 해당 함수에 JSX를 유지할 수 있습니다. 따라서 필요할 때마다 동일한 요소를 갖도록 해당 함수를 호출할 수 있습니다.
const renderElement = text => {
return (
<h1>
{text}
</h1>
);
};
위의 함수는 JSX를 반환하므로 JSX에서 필요할 때마다 해당 함수를 호출할 수 있습니다.
해당 기능의 사용법은 다음과 같습니다.
{renderElement("text1")}
{renderElement("text2)}
renderElement
함수를 createElement API에 전달하여 reactElements를 생성할 수도 있습니다.React.createElement(renderElemet, null, 'Hello world');
그러나 renderElement 함수로 할 수 없는 것은 아래와 같이 div 태그에 대해 수행한 태그로 renderElement를 사용할 수 없다는 것입니다.
div 태그의 경우 이렇게 할 수 있습니다.
바닐라 자바스크립트
const element1 = React.createElement('div', null, 'Helloworld');
JSX
<div>
Hello world
</div>
const element2 = React.createElement(renderElement, null, 'Hello World');
그러나 요소를 JSX로 사용할 수 없습니다.
해당 기능을 태그로 사용하기 위해서는 이름이 대문자로 시작되어야 하며 이러한 기능을 컴포넌트라고 합니다.
const CustomComponent = ({ children }) => {
return (
<h1>
{children}
</h1>
);
이 CustomComponent는 태그로 사용하거나 아래와 같이 React API로 렌더링할 수도 있습니다.
바닐라 JS:
const element3 = React.createElement(CustomComponent, null, 'Hello world');
JSX:
<CustomComponent>
<h1>
Hello world
</h1>
</CustomComponent>
이러한 구성 요소는 클래스 범위 내에서 특수 변수에 액세스할 수 있으며 값을 보유하는 state라는 함수와 React 요소는 이러한 값이 업데이트될 때마다 다시 렌더링될 수 있습니다.
Reference
이 문제에 관하여(React 요소 대 React 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bmchaitu/react-element-vs-react-component-330i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)