결론부터 말하자면
리액트를 공부하다가 React Element랑 React Component랑 넘 혼동해서 말하다보니까 정확한 구분이 뭔지 헷갈려서 찾아봤다.
예! 결론부터 말하자면, React Element는 React Component랑 관련되어 있지만 엄연히 둘은 다르다.React Element는 React Component의 요소나 렌더될 돔 노드를 묘사하는 객체이다.
const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');위 코드에서 알 수 있듯이 element는 React.createElement 함수를 이용해 hello, world!라는 텍스트 내용을 가진 class 명이 greeting인 h1 태그인 React Element다.
반면에 react Component는 일련의 기능을 캡슐화하는 재사용 가능한 코드 조각이며 응용 프로그램의 여러 위치에서 사용 가능
function Greeting(props) {
return <h1 className="greeting">{props.message}</h1>;
}이 코드는 Greeting이라는 함수 컴포넌트로, ~~한 h1 엘리먼트를 리턴하는 컴포넌트이다. 즉, element는 컴포넌트의 구성 요소인거임
한 줄 정리
React Element는 렌더될 요소를 나타내고, React Component는 그런 element를 리턴하는 재사용 가능한 코드 조각임.
참고
- 챗 쥐피티
A React element is an object that describes a component instance or a DOM node that should be rendered to the screen. It is the simplest building block in React and can be created using the React.createElement() function.
On the other hand, a React component is a reusable piece of code that encapsulates a set of functionality and can be used in multiple places throughout an application. A component can be thought of as a JavaScript function that returns a React element.
In summary, a React element represents the description of what should be rendered to the screen, while a React component is a reusable piece of code that generates a React element.
- react 공식문서
