[React 톺아보기] 4. 컴포넌트(1) 컴포넌트 렌더링

이번 포스팅에서는 React의 핵심 개념인 컴포넌트에 대해서 다루어 보겠습니다. 이제부터는 본격적으로 To Do List를 만들면서 진행하도록 하겠습니다. 소스코드는 To Do List의 오픈소스 프로젝트 사이트를 참고하였습니다.

 

1.컴포넌트(Component)란? 

컴포넌트는 앱의 재사용가능한 작은 UI 조각입니다.  

왼쪽의 to do list를 오른쪽과 같이 작은 컴포넌트들로 분리할 수 있다.

To Do List를 예로 들어보면 위의 검은색, 분홍색, 보라색, 파란색 박스들이 모두 컴포넌트입니다. 위의 박스들 말고도 버튼, 글자들도 모두 컴포넌트에 해당됩니다. 이처럼 컴포넌트는 사용자가 정의하기 나름입니다.

 

2. 컴포넌트 렌더링

컴포넌트 정의하기

컴포넌트는 상호작용하는 마크업을 반환하는 Javascript 함수 형태입니다. 컴포넌트 안에 마크업과 기능이 모두 들어있죠.

먼저 Hello World를 출력하는 간단한 컴포넌트를 렌더링 해보겠습니다. App.js에 불필요한 코드들을 지우고 아래의 코드만 남겨주세요. 

//함수형 컴포넌트
import React from 'react'

function App() {
  //기능이 추가될 공간 입니다.
  return <h1>Hello World</h1>;
}

export default App;

컴포넌트는 위와 같이 기능을 정의하는 부분과 XML을 반환하는 부분으로 구성합니다. 컴포넌트를 정의할 때에는 다음 몇 가지 규칙을 지켜주어야 합니다.

• JSX에서 컴포넌트 이름의 첫 글자는 반드시 대문자이어야 한다.
• 컴포넌트는 반드시 하나의 요소를 반환해야 한다. 최상단의 부모요소는 하나로만 감싸야 한다.
• XML 부분에서 Javascript 표현식을 사용할 때에는 { }을 이용한다. 이를 데이터 바인딩이라고 한다.

 

이제 터미널에서  npm install 명령어를 통해 실행하면 아래와 같은 컴포넌트가 렌더링됩니다.

 

컴포넌트 종류

컴포넌트는 두 종류로 작성할 수 있는데 각각 클래스형 컴포넌트, 함수형 컴포넌트라고 합니다. 두 방식 모두 위와 같이 똑같은 결과를 나타냅니다.

[클래스형 컴포넌트]

//클래스형 컴포넌트
import React from 'react'

class App extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }

}

export default App;

위와 같이 클래스의 형태로 컴포넌트를 만들 수 있습니다. 클래스이기 때문에 component를 상속받아야 합니다. 맨 마지막 줄은 App클래스를 index.js에서 사용하기 위해 App을 내보내는 코드입니다.

 

[함수형 컴포너트]

//함수형 컴포넌트
import React from 'react'

function App() {
  return <h1>Hello World</h1>;
}

export default App;

함수형 컴포넌트는 함수 형태로 컴포넌트를 작성하는 것입니다. 함수 자체가 렌더 함수이기 때문에 render() 메서드가 따로 필요하지 않고 Component를 상속받지 않아도 됩니다.

 

클래스스형 컴포넌트 VS 함수형 컴포넌트?

기존의 프로젝트들은 거의 클래스형 컴포넌트로 개발했었습니다. 하지만 React 16.8 버전 이후 Hook 함수들이 도입되고 함수형 컴포넌트의 단점이 보완되었습니다. 이후 함수형 컴포넌트로 클래스형 컴포넌트를 대체할 수 있게 되었고 현재 공식 문서에서도 함수형 컴포넌트로 개발할 것을 권장하고 있습니다. 따라서 앞으로의 코드는 모두 함수형 컴포넌트로 작성할 것입니다. 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해서는 기회가 되면 자세히 다루어 보겠습니다.

 

3. To Do List 컴포넌트 렌더링하기

컴포넌트 설계

이제 To Do List를 위한 컴포넌트를 구성해 보겠습니다. 만들어야 할 컴포넌트는 크게 총 세 가지입니다.

1. TodoTemplet: To Do List를 감싸는 박스 컴포넌트입니다.
2. TodoHead: TodoTemplet 박스안의 상단에서 오늘 날짜 등의 주요 정보를 나타내는 컴포넌트입니다.
3. TodoMain: 할 일의 목록들을 나타내주는 컴포넌트입니다.

 

TodoTemplet 컴포넌트

다음과 같이 className 속성을 주고 컴포넌트를 생성했습니다.

function TodoTemplet() {
  return (
    <div className='todoWrapper'></div>
  )
}

 

그러면 App.js에 다음처럼 컴포넌트가 추가됩니다. App 컴포넌트에서는 TodoTemplet를 반환합니다.

App.js

//App.js
import React from 'react'
import './App.css'

//컴포넌트 정의하기
function TodoTemplet() {
  return (
    <div className='todoWrapper'></div>
  )
}

//App 컴포넌트에서 TodoTemplet 컴포넌트를 반환
function App() {
  return (
    <TodoTemplet></TodoTemplet>
  )
}

export default App;

 

이제 스타일을 넣어주겠습니다.

App.css

html {
  display:flex;
  overflow-y: scroll;

}

body {
  height: 100rem;
  background-color: #ccced1;
  margin: auto;
  display:flex;
}

App {
  font-size: large;
}

.todoWrapper{
  position:relative;
  margin: 0 auto;
  margin-top: 30%;
  width: 450px;
  height: 700px;
  border-radius: 16px;
  background-color: rgb(255, 255, 255);
}

 

CSS속성을 주고 나서 실행하면 다음과 같이 TodoTemplet을 렌더링합니다.

이제 나머지 컴포넌트들도 만들고 렌더링해보겠습니다.

 

TodoHead 컴포넌트

function TodoHead() {
  return (
    <div className='todoHeadBox'>
      <h1>2024년 3월 1일</h1>
      <p>월요일</p>
      <div className='tasksLeft'>할 일 1개남음</div>
    </div>
  )
}

위의 코드처럼 여러 엘리먼트를 렌더링할 수 있습니다. 최상단 부모 요소 하나로만 감싸야 한다는 규칙만 지키면 됩니다.

 

TodoMain 컴포넌트

function TodoMain() {
  return (
    <div></div>
  )

TodoMain 컴포넌트에는 todoMainBox의 속성을 주고 div박스를 하나 반환하겠습니다. 간단한 틀만 구성하고 이후에 자세한 기능을 넣어주겠습니다. App.css 파일에 다음 속성을 추가해 주세요.

.todoMainBox{
  margin:0 auto;
  width:80%;
  height: 500px;
  background-color: rgb(206, 226, 221);
  padding: 20px 32px;
  overflow-y: auto;
}

 

마지막으로 TodoTemplet에서 TodoHead 컴포넌트와 TodoMain 컴포넌트를 렌더링해주면 되겠죠.

function TodoTemplet() {
  return (
    <div className='todoWrapper'>
      <TodoHead></TodoHead>
      <TodoMain></TodoMain>
    </div>
  )
}

 

다음은 전체 코드입니다.

App.js

import React from 'react'
import './App.css'

function TodoHead() {
  return (
    <div className='todoHeadBox'>
      <h1>2024년 3월 1일</h1>
      <p>월요일</p>
      <div className='tasksLeft'>할 일 1개남음</div>
    </div>
  )
}

function TodoMain() {
  return (
    <div className='todoMainBox'></div>
  )
}

function TodoTemplet() {
  return (
    <div className='todoWrapper'>
      <TodoHead></TodoHead>
      <TodoMain></TodoMain>
    </div>
  )
}


function App() {
  return (
    <TodoTemplet></TodoTemplet>
  )
  
}

export default App;

 

App,css

html {
  display:flex;
  overflow-y: scroll;

}

body {
  height: 100rem;
  background-color: #e9ecef;
  margin: auto;
  display:flex;
}

.todoHeadBox {
  border-bottom: 1px solid #e9ecef;
}

.tasksLeft {
  position:relative;
  color:rgb(4, 173, 117);
  font-size: 18px;
  margin-top: 90pxx;


}

App {
  font-size: large;
}

.todoWrapper{
  position:relative;
  display:flex;
  flex-direction: column;
  width: 450px;
  height: 700px;
  margin: 0 auto;
  margin-top: 30%;
  border-radius: 16px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
}
.todoMainBox{
  margin:0 auto;
  width:80%;
  height: 500px;
  background-color: rgb(206, 226, 221);
  padding: 20px 32px;
  overflow-y: auto;
}

 

CSS 속성까지 적용하여 완성된 To Do List의 기본 틀입니다.

이렇게 To Do List의 기본 컴포넌트들을 정의하고 틀을 완성했습니다. 다음 포스팅에서는 이 컴포넌트들을 조금 더 구체적으로 구성해 보겠습니다.