[React] React Component 생성법

1. React Component
2. React.createElement()
3. JSX
① JSX
② JSX 코드에 JavaScript 추가하기

---

1. React Component

React는 사용자 인터페이스 User Interface, 속칭 UI를 만들기 위한 JavaScript 라이브러리로

React로 개발한 웹 페이지는 여러 개의 Component를 조합해서 만들어진다.

여기서 Component란 '구성요소', '부품'이라는 의미를 가지고 있다.

 

이를 참고해서 React에서 Component는 UI를 만들기 위한 구성 요소 및 부품이라고 할 수 있다.

이해를 돕기 위해서 React로 개발된 웹 페이지 하나를 예시로 가져와봤다.

 

https://www.instagram.com/

Instagram

---

 

위의 이미지처럼 '검색', '메시지', '알림' 등과 같은 개별적인 웹 페이지의 여러 구성요소들이 존재하고

이러한 웹 페이지 구성 요소가 모여서 또 다른 웹 페이지 구성 요소를 만들고

그리고 이런 식으로 웹 페이지의 여러 구성 요소들이 모여서  Instagram이라는 하나의 웹 페이지가 만들어진다.

---

React가 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이고

Component란 웹 페이지의 사용자 인터페이스를 구성하는 부품이라는 것을 알았으니

이제 React Component를 어떻게 만드는지 알아볼 차례이다.

 

React에서 Component를 만드는 방법은 두 가지가 존재하는데

하나는 'createElement' 함수를 통해서 React Component를 만드는 방법이고

다른 하나는 'JSX'라는 문법을 활용해서 React Component를 만드는 방법이다.

 

이 두 방법에 대해서는 바로 다음 장에서 다루도록 하겠다.

---

2. React.createElement()

'React.createElement()' 함수는 React 최상위 API로 인자로 주어지는 타입에 따라

새로운 React Element, Component를 만들어서 return 하는 함수이다.

React.createElement(
    /*Type*/
    /*[props]*/
    /*[children]*/
);

 

• Type : <p>, <h1 ~ h6>, <div>, <span> 등의 HTML 태그를 인자로 전달받는다.
• props: HTML의 id, class, style과 같은 HTML 태그의 속성을 객체 Property의 형태로 전달받는다.
• children: HTML 요소의 Content나, 해당 요소 안에 포함시킬 자식 요소를 명시할 수 있다.

'createElement()' 함수에 대해 알아보긴 했지만

단순 설명 만으로는 감이 잡히지 않을 것 같기에 예제를 하나 준비해 봤다.

---

 

먼저 'index.html' 파일을 만들고 (파일 명은 원하는 것으로 설정해도 상관없음)

body 태그 내부에 'root'라는 id 속성 값을 가진 <div> 요소를 추가하자.

 

그다음 React와 ReactDOM을 설치해야 한다.

아래 링크로 들어가면 <script> 태그가 두 개 보일 텐데

둘 다 복사해서 html 파일에 추가하면 React와 ReactDOM 설치가 완료된다.

 

React, ReactDOM 설치하기 / React 공식 문서

---

<script>
    const Btn = React.createElement(
    	"button",
        { onClick: () => alert("Hello") },
        "Click !"
    );
    
    const root = ReactDOM.render(document.getElementById("root"));
    root.render(Btn);
</script>

 

[Codepen에서 예제 실행하기]

 

위의 예제를 실행하면 웹 브라우저 화면상에 'Click!'이라고 적혀있는 버튼이 하나 보일 것이다.

버튼을 클릭하면 "Hello"라는 문장이 적힌 알림 창이 나온다.

 

이번엔 'Click!'이라고 적힌 버튼 위에 "Click Here 👇"라는 메시지를 추가해 보자.

앞에서 'createElement()' 함수의 인자인 children에는 자식 요소를 명시할 수 있는데

당연하게도 children에 인자로 한 개의 값만 전달할 수 있다.

 

하지만 우리의 목표는 'Click' 버튼과 "Click Here 👇"라는 메시지를 웹 페이지에 표시하는 것이기에

이 두 요소를 묶을 Container 요소를 만들고

인자 children에 버튼과 메시지 요소를 배열 Array로 묶어서 전달하도록 하자.

<script>
    const Message = React.createElement("h4", null, "Click Here 👇");
    
    const Btn = React.createElement(
    	"button",
        { onClick: () => alert("Hello")},
        "Click !"
    );
    
    const Container = React.createElement(
    	"div", null, [Message, Btn]
    );
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(Container);
</script>

 

[Codepen에서 예제 실행하기]

예제를 실행하면, Btn과 Message Element를 배열로 묶고, 인자 children에 값으로 전달된다.

그러면 두 요소는 Container의 자식 요소로 지정했기 때문에

Container 컴포넌트가 랜더링 되면 해당 컴포넌트의 하위 요소인 Btn과 Message도 같이 랜더링 된다.

---

 

이제 예제가 실행 중인 상태에서 Console 탭을 열어서 아래 코드를 입력해서

웹 페이지에 랜더링된 React Element인 Container의 구조를 확인해보자.

React Element : Container

 

브라우저 엔진이 HTML 코드를 JavaScript가 참조할 수 있도록 DOM 객체로 변환하기 때문에

위의 이미지처럼 React Element인 Container가 DOM 객체 Object의 형태로 출력되는 것을 확인할 수 있다.

---

3. JSX

① JSX

 

JSX란 JavaScript Syntax eXtension의 약어로 JavaScript의 확장 문법이다.

const JSXExam = <h4>Hello World</h4>;

 

생김새를 보면 HTML 코드 같기도 하지만, JavaScript 코드 같기도 하다.

말 그대로 JavaScript를 확장한 문법으로 'JavaScript + XML / HTML'이라고 할 수 있다.

 

그럼 이제 JSX 문법을 활용해서 React Element를 만들어 볼 것인데

JSX로 작성한 코드는 브라우저 엔진이 해석할 수 있는 형태가 아니기 때문에

 

이를 브라우저 엔진이 해석할 수 있는 형태로 변환해주는 역할을 하는 Babel을 추가해줘야 한다.

 

아래 링크로 들어가서 Babel을 설치해주고 (<script> 태그 복사 + 붙여넣기)

현재 코드를 작성 중인 <script> 태그의 type을 'text/babel'로 명시해주도록 하자.

 

Babel <script> 태그 추가하기

빨간색 테두리로 표시한 script 태그를 html 파일에 추가하면 된다.

 

이러면 이제 JSX 문법으로 React Element를 만들 준비가 끝났다. 아래 예제를 한 번 실행해보자.

<script type="text/babel">
    const Container = (
      <div>
        <h4>Click Here 👇</h4>
        <button onClick={()=>alert("Hello World")}>Click !</button>
      </div>
    );

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(Container);
</script>

 

[Codepen에서 예제 실행하기]

 

버튼을 클릭하면, Hello World가 적힌 알림창이 나온다.

 

JSX 문법으로 작성한 버튼 예제가 Babel에 의해 브라우저 엔진이 해석할 수 있는 형태로 변환됐다.

그리고 추가적으로 Console 탭에서 Container Element를 확인해보면

'React.createElement()' 함수로 생성된 React Element와 동일한 형태의 DOM 객체로 출력된 것을 알 수 있다.

---

② JSX  코드에 JavaScript 추가하기

 

JSX는 어디까지나 JavaScript에서 확장된 문법이기 때문에

JSX 코드 내부에 '{ } (중괄호)'를 추가하는 것으로 JavaScript 코드를 추가할 수 있다.

<script type="text/babel">
    let UserName = "홍길동";
    const Exam = <h4>변수 UserName의 값 : {UserName}</h4>;
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(Exam);
</script>

 

예제를 실행하면 변수 UserName의 값이 출력되는 것을 확인할 수 있다.

예제 실행 결과

---

📕 Reference
ReactJS로 영화 웹 서비스 만들기 / Nomad Coders
처음 만난 리액트 (React) / Inflearn
JSX 소개 / React 공식 문서