React : 컴포넌트

리액트 엘리먼트

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

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

const element = <h1>안녕 리액트!</h1>;

console.log(element);
root.render(element);

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

 

JSX 코드를 담고있는 변수 element를 출력해보면 객체로 나온다. 

 

이런 객체를 리액트 엘리먼트라고 부른다.

이 리액트 엘리먼트를 render 함수의 아규먼트로 전달하게 되면,

리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것이다.

리액트 엘리먼트는 리액트로 화면을 그려내는데 가장 기본적인 요소다.

 

리액트 컴포넌트

 

1) 리액트 컴포넌트의 개념

리액트 컴포넌트는 리액트 엘리먼트를 더 자유롭게 다루기 위한 하나의 문법이다.

 자바스크립트의 함수를 활용하면 간단하게 리액트 컴포넌트를 만들 수 있다.

 

아래 코드에서 JSX 문법으로 작성된 하나의 요소를 리턴하는

Hello 함수가 바로 하나의 리액트 컴포넌트이다.

 

 

 

2) 리액트 컴포넌트의 조건

리액트 컴포넌트는 그저 함수로 만든다고 해서

모두 리액트 컴포넌트가 되는 것은 아니다.

 

리액트 컴포넌트의 이름은

반드시 첫 글자를 대문자로 작성해야 하고,

반드시 JSX 문법으로 만든 리액트 엘리먼트를 리턴해줘야한다.

 

컴포넌트 이름의 첫 글자가 소문자라면 오류가 발생한다.

 

 

3) 리액트 컴포넌트의 장점

 

이렇게 요소를 컴포넌트로 작성하게 되면 다양한 장점들이 있다.

import ReactDOM from 'react-dom';

function Hello() {
  return <h1>안녕 리액트</h1>;
}

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(element);

그리고 이렇게 컴포넌트를 작성하면,

위 코드에서 element 변수 안의 JSX 코드에서 볼 수 있듯

컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수가 있다.

 

이런 특성을 모듈 문법으로 활용하면

훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수가 있다.

 

 

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;

return문을 소괄호에 감싸서 작성하면 여러 줄에 걸쳐서 코드를 작성할 수 있다.