개발자 컴퓨터공학과 공대 대학생

IT/React

[React] 컴포넌트는 뭐고, 왜 쓰는 걸까?

Buang 2023. 1. 26. 09:45

1. 컴포넌트 정의

컴포넌트는 사용자 정의 태그라고 할 수 있다.

카페에 갔는 데 바나나 우유와 딸기 우유만 판다고 해보자.

나는 바나나도 딸기 우유도 마음에 들지 않았다.

초코 우유를 먹고 싶었다. 그래서 직접 초코 우유를 만들었다.

이렇게 기존에 있던 것(바나나 우유, 딸기 우유)에서

벗어나 새로운 것(초코 우유)을 내가 직접 만드는 것이

컴포넌트의 개념과 유사하다.

이 개념을 숙지하고 아래 글을 읽어도 좋고,

만약 html을 접해봤다면 더 정확한 개념 이해를 위해

아래 '더보기'를 추가로 보는 걸 추천한다.

html을 안다면 <li> 태그라는 걸 들어봤을 것이다.

<li> 태그는 list의 약자로 '목록'을 만드는 태그다.

li 태그 외에 head태그, ol 태그, body 태그 등

각자 특정한 기능을 가지고 있는 여러 태그들이 존재한다.

여기서 우리가 직접 태그를 만들어보면 어떨까?

란 부분에서 '컴포넌트'가 등장했다.

위와 같은 화면을 출력하는

코드를 작성해 봤다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <header>
        <h1><a href="/"> WEB </a></h1>
      </header>
    </div>
  );
}

export default App;

이 코드를 보기 좋게 만들 수 있는

아주 좋은 방법이 있다.

바로 사용자 정의 태그,

리액트 세상에선 이 사용자 정의 태그를

컴포넌트라는 데 이 컴포넌트를 만드는 것이다.

head태그와 header 태그 차이

<head> 태그

<!DOCTYPE html>
<html>
  <head>
    <title>사과</title>
    <meta name="description" content="이 페이지는 사과의 효능을 설명하고 있습니다.">

<head> 태그는 <body> 태그를 설명한다.

title> 태그는 <body> 태그 문서의 제목을 검색엔진과 같은 컴퓨터에게 전달합니다.

<header> 태그

<html>
  <head></head>
  <body>
    <header>
      <h2>사이트 제목</h2>
    </header>

<header> 태그는 <body> 태그의 제목을 나타낸다.

컴포넌트(사용자 정의 태그)

import logo from './logo.svg';
import './App.css';

function Header() { //사용자 정의 태그인 Header를 만들어 줌
  return <header>
  <h1><a href="/"> WEB </a></h1>
</header>
}

function App() {
  return (
    <div>
      <Header></Header>
    </div>
  );
}

export default App;

- 상단에 Header라는 함수를 만들어줬다.

그리고 <header> 태그 안에 있는 것들을

function Header 안에 넣어줬다.

- 리액트에서 사용자 정의 태그를 작성할 땐

반드시 대문자로 시작해줘야 한다.

function 뒤에 header라고 쓰면 안돼고

Header라고 써야한다.

이유는 리액트는 소문자로 시작하는 컴포넌트를

DOM 태그로 인식하기 때문이다.

우리가 HTML에서 자주보는 div, span, h1 태그같은

기존에 HTML내에 내장되어 있는 태그로 인식한다는 것이다.

컴포넌트는 내장된 태그가 아닌 우리가 만든 태그가

우리가 직접 만든 태그란 걸 알려주기 위해

컴포넌트 시작을 대문자로 해주는 것이다.

2. 컴포넌트 이점

2-1. 코드 가독성

상상력을 발휘해서

WEB이란 글씨를 위에처럼 3개 띄우고 싶다면?

import logo from './logo.svg';
import './App.css';

function Header() { //사용자 정의 태그인 Header를 만들어 줌
  return <header>
  <h1><a href="/"> WEB </a></h1>
</header>
}

function App() {
  return (
    <div>
      <Header></Header>
      <Header></Header>
      <Header></Header>
    </div>
  );
}

export default App;

<Header> 태그를 추가로 작성해 주기만 하면 된다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <header>
        <h1><a href="/"> WEB </a></h1>
      </header>
      <header>
        <h1><a href="/"> WEB </a></h1>
      </header>
      <header>
        <h1><a href="/"> WEB </a></h1>
      </header>
    </div>
  );
}

export default App;

만약 컴포넌트를 사용하지 않았다면

코드 길이가 위에처럼 길어지고 보기에도 불편했을 것이다.

2-2. 반복잡업 방지

위에서 내가 WEB이란 글씨를 3개 띄우는 걸 했었다.

WEB을 모두 REACT로 바꾸고 싶다면 어떻게 하면 될까?

import logo from './logo.svg';
import './App.css';

function Header() { 
  return <header>
  <h1><a href="/"> REACT </a></h1> 
</header>
}

function App() {
  return (
    <div>
      <Header></Header>
      <Header></Header>
      <Header></Header>
    </div>
  );
}

export default App;

function Header 안에 있는

<h1><a href="/"> WEB </a></h1>을

<h1><a href="/"> REACT </a></h1> 로 바꿔주면 된다.

만약 컴포넌트를 사용하지 않았다면 어떻게 됐을까?

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <header>
        <h1><a href="/"> REACT </a></h1>
      </header>
      <header>
        <h1><a href="/"> REACT </a></h1>
      </header>
      <header>
        <h1><a href="/"> REACT </a></h1>
      </header>
    </div>
  );
}

export default App;

이라고 써져 있던 부분에서 WEB 부분만

일일이 REACT로 총 3번 바꿔줘야 했을 것이다.

컴포넌트를 사용하면 반복잡업을 줄일 수 있는 장점도 있다.

리액트는 이렇게 컴포넌트를 만들 수 있는

장점이 있어서 잘 사용되고 있다.

3. 연습문제

배운 걸 완전히 내것으로 만들 때

연습문제만큼 좋은 게 없다.

그러니 꼭 연습문제를 풀어보자!

문제는 아래와 같다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
    
      <header>
        <h1><a href="/"> WEB </a></h1>
      </header>
    
      <nav>
        <ol>
          <li><a href=" /read/1">html</a></li>
          <li><a href=" /read/2">css</a></li>
          <li><a href=" /read/3">js</a></li>
        </ol>
      </nav>
      
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
      
    </div>
  );
}

export default App;

- header 태그 안에 있는 것과

nav 태그 안에 있는 것

마지막으로 article 태그 안에 있는 것들을 모두

컴포넌트를 사용해서 코드를 수정해 보자

- 만들어야 할 컴포넌트는 총 3개다.

- 컴포넌트 이름을 어떻게 지정하든 상관없다.

정답

import logo from './logo.svg';
import './App.css';

function Header() {
  return <header>
  <h1><a href="/"> REACT </a></h1>
</header>
}

function Nav() {
  return <nav><ol>
  <li><a href=" /read/1">html</a></li>
  <li><a href=" /read/2">css</a></li>
  <li><a href=" /read/3">js</a></li>
</ol></nav>
}

function Article(){
  return <article><h2>Welcome</h2>
  Hello, WEB</article>
}


function App() {
  return (
    <div>
      <Header></Header> 
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

'IT > React' 카테고리의 다른 글

[React] 'Switch' is not exported from 'react-router-dom' - Error (0)	2023.02.20
[React] 리액트 '이벤트 핸들링'이 뭘까? (0)	2023.01.28
[React] JSX가 도대체 뭘까? (0)	2023.01.28
[React] 리액트 'Props'가 도대체 뭘까? (0)	2023.01.28

현재글[React] 컴포넌트는 뭐고, 왜 쓰는 걸까?

Buang

[React] 컴포넌트는 뭐고, 왜 쓰는 걸까?

1. 컴포넌트 정의

<head> 태그

<header> 태그

컴포넌트(사용자 정의 태그)

2. 컴포넌트 이점

2-1. 코드 가독성

2-2. 반복잡업 방지

3. 연습문제

정답

'IT > React' 카테고리의 다른 글

'IT/React'의 다른글

티스토리툴바

[React] 컴포넌트는 뭐고, 왜 쓰는 걸까?

1. 컴포넌트 정의

<head> 태그

<header> 태그

컴포넌트(사용자 정의 태그)

2. 컴포넌트 이점

2-1. 코드 가독성

2-2. 반복잡업 방지

3. 연습문제

정답

'IT > React' 카테고리의 다른 글

'IT/React'의 다른글

관련글

티스토리툴바