React Element

JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.

import ReactDOM from 'react-dom';
const element = <h1>안녕 리액트!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById('root'));

{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}

이런 객체를 React Element라고 부른다.

이 React Element를 ReactDOM.render 함수의 argument로 전달하게 되면, React가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것이다.

React Element는 React로 화면을 그려내는데 가장 기본적인 요소이다.

React Component

React Component는 React Element를 조금 더 자유롭게 다루기 위한 하나의 문법이다.

Component를 만드는 가장 간단한 방법은 JS의 함수를 활용하는 것이다. 아래 코드에서 JSX 문법으로 작성된 하나의 요소를 return하는 Hello 함수가 바로 하나의 component이다.

이렇게 요소를 component로 작성하게 되면 다양한 장점들이 있는데, 자세한 내용은 이후의 개념들을 통해 차차 알아보도록 한다!

import ReactDOM from 'react-dom';
function Hello() {
  return <h1>안녕 리액트</h1>;
}
const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);
ReactDOM.render(element, document.getElementById('root'));

그리고 이렇게 component를 작성하면, 위 코드에서 element 변수 안의 JSX 코드에서 볼 수 있듯 component 함수 이름을 통해 하나의 tag처럼 활용할 수가 있다.

이런 특성을 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수가 있다.

예시: Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}
export default Dice;

예시: App.js

import Dice from './Dice';
function App() {
  return (
    <div>
      <Dice />
    </div>
  );
}
export default App;

한 가지 주의해야 할 부분은, React Component의 이름은 반드시 첫 글자를 대문자로 작성해야 한다. 컴포넌트 이름의 첫 글자가 소문자라면 오류가 발생하니깐 꼭 주의한다.