NEXT 공부

컴포넌트의 생성과 작동 원리

beingB 2022. 9. 14. 15:37
반응형

리액트의 작동 원리에서 설명했듯 리액트는 컴포넌트라는 개념을 통해 웹 페이지를 표현하게 됩니다.

컴포넌트는 웹 페이지의 요소를 컴포넌트를 통해 나누어 개발한 다음 컴포넌트를 호출하는 방식을 통해 웹페이지를

구성할 수 있습니다.

컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있고, 컴포넌트 하나에서 컴포넌트의 생김새와 작동방식을 정의한다고

설명드렸던 적이 있습니다. 우선 백문이 불여일타 라고 실제 컴포넌트를 선언한 다음 작동방식에 대해 알아보도록 하겠습니다.

 

// 클래스형 컴포넌트
import React, { Component } from "react";

class CIntroduce extends Component {
  render() {
    const name = "BeingB";
    return (
      <div>
        <h1>나는 클래스형 컴포넌트 ! </h1>
        <h2>느리게 올라가는 달팽이</h2>
        <h3>{name}입니다.</h3>
      </div>
    );
  }
}

export default CIntroduce;

우선 위의 선언 방법은 클래스형 컴포넌트를 선언한 것입니다. 위와 같이 src 내 CIntoduce 라는 js 파일을 만든 다음 class 로 CIntroudce를 선언하고, 제 블로그를 소개하는 컴포넌트를 작성해 봤습니다.

리액트의 작동 원리의 렌더링 부분에서 설명했던 것과 같이 render 라는 함수 안에 내용을 선언한 다음 웹 페이지 상에

보여줄 내용물을 return 안에 넣음으로써 컴포넌트를 완성시켰습니다.

 

이렇게 컴포넌트를 생성했다고 해서 컴포넌트가 웹 페이지에 보여지는 것은 아닙니다. 리액트의 작동 방식에 대해서 먼저 말씀드리자면 

create react-app을 통해 리액트 파일을 생성했다면, 기본 구조가 아래의 그림과 같이 이루어져 있을 것입니다. 

(CIntroudce, FIntroduce 는 제가 생성한 것 ) 

리액트의 기본 디렉토리 구조

여기서 src 내 index.js 를 자세히 들여다 보면 

src/index.js

뭔가 이상한 말들이 잔뜩 쓰여 있습니다. root 라는 const형 변수를 선언하고, 'root'라는 Id 요소를 불러온 다음 ReactDOM 이라는 것의

Root로 만들고 있습니다. [ 7 번째 라인 ] 그 후에 8 번째 줄에서 root라는 변수의 render 라는 함수 안에 <App /> 이라는 컴포넌트를

넣어 줬습니다. [ render 함수가 무엇인지는 전 글인 React의 작동 원리의 랜더링 부분을 참조해주시길 바랍니다. ]

쉽게 풀어써보자면 <App /> 이라는 컴포넌트를 가져와 root라는 Id 요소에 랜더링 해주겠다는 의미로 해석할 수 있습니다.

 

그렇다면 이 'root'라는 요소는 어디에 존재하는 것일까 ? 하고 궁금증이 생깁니다.  다시 디렉토리를 들여다 보면

public/index.html

public 안에 index.html을 자세히 들여다 보면 "root" 라는 id의 <div> 태그가 존재합니다.

 

위의 index.js에서 하는 역할은 즉 <App /> 이라는 컴포넌트를 가져와 index.html 안의 root 라는 <div> 태그 안에 만들어진

컴포넌트 들을 집어 넣겠다는 의미입니다. 

 

그렇다면 저희가 활용해야 하는 부분은 어디일까요 ? index.js 에는 이미 많은 정보를 가지고 있고, root에 랜더링을 담당하는 부분이니

잘못 건들이게 된다면 랜더링이 잘 작동하지 않는 문제가 발생할 수 있습니다. 그래서 index.js 에서는 <App /> 이라는 컴포넌트를

불러와 랜더링을 해 주는 것이기 때문에 [ 글쓴이의 생각 ] 저희가 깔끔하고 문제없이 건들일 수 있는 부분인 App.js 를 수정하는 방식을

통해 원하는 컴포넌트를 넣을 수 있습니다.

src/App.js

이렇게 App.js 내의 내용을 전부 비운 다음 위에 제가 만든 CIntroduce.js 를 App.js에 import 한 다음

<CIntroduce /> 를 <div className="App"> 안에 집어 넣었습니다. 컴포넌트를 제작할 때는 꼭 export를 통해 내보내야만

다른 컴포넌트나 index.js 에서 import 라는 문법을 통해 불러올 수 있습니다. App도 CIntroduce와 마찬가지로 index.js 에서

사용하는 하나의 컴포넌트에 불과하기 때문에 export를 통해 내보내야만 하고 index.js 에서는 App을 import 하는 방식을 통해

불러올 수 있습니다. 그러면 제작된 컴포넌트를 확인하기 위해 페이지를 확인해보도록 하겠습니다.

yarn start 를 통해 실행한 웹 페이지

저희가 제작한 클래스형 컴포넌트가 잘 생성되어 웹 페이지에 잘 보여지는걸 확인할 수 있습니다. 

개발자 도구

개발자 도구에 들어간 다음 index.html에 잘 반영되었나 요소를 확인해보면 "root" 안에 App.js 에 있던 "App"이라는 div 태그가

만들어 졌고 그 안에 저희가 제작한 CIntroduce 컴포넌트의 return 에 작성하였던 요소들이 잘 들어가 있는것을 확인할 수 있습니다.

 

위의 글을 쉽게 작성해보자면

1. index.js 에서는 <App />을 컴포넌트로 불러온다.

2. App.js는 <CIntroduce />을 컴포넌트로 불러온다.

3. index.js는 public 의 index.html 속 <div id = "root"> 안에 랜더링 해 준다.

반응형
저작자표시 (새창열림)