React 왜 씀? (진짜모름)

황준혁·2024년 10월 1일

Learning About React

목록 보기

1/1

귀여운 타일러입니다.

오늘부터 React를 본격적으로 배워보려 합니다. 이유는 간단합니다. 학교 전공 동아리 프로젝트에 참여하는데, 할 줄 아는 게 없어서 배우기로 했습니다. 그렇다면 React는 왜 배워야 하는 겁니까? 마침, 참고한 강의에서 그 답을 찾았어요. 밑에 써놓은 거 보셈.

React의 장점

새로고침 없는 빠른 UI 업데이트
리액트 안 쓴 일반적인 웹 페이지는 페이지를 이동하거나 특정 동작을 할 때마다 전체를 새로고침해야 함. 근데 React는 SPA(Single Page Application) 구조를 지원하기 때문에, 새로고침 없이도 필요한 부분만 빠르게 업데이트할 수 있다네요. 이게 사용자 입장에서 매우 편한 구조죠.

SPA는 쉽게 말해, 한 개의 페이지로 이루어진 애플리케이션이라 생각하면 됨. 필요한 데이터만 불러와서 화면을 빠르게 업데이트하는 방식이에요. 대충 알아먹읍시다.
컴포넌트를 이용한 코드 재사용
이게 개신기함 ㄹㅇ; 리액트에서는 UI를 컴포넌트로 분리해서 관리할 수 있음. 예를 들어, 버튼이나 카드 같은 UI 요소를 독립된 컴포넌트로 만들면, 필요한 곳에 얼마든지 가져다 쓸 수 있어요. 이건 밑에서 실제로 사용해보면서 다시 말해드림.

일단 다운 받아보자

React 설치 방법이 궁금하다면, 구글에 react vite 설치만 쳐도 설치법이 쭉 나옴. 저도 그거 보고 설치했어요. 이게 제일 편한 거 같음. (혹시 이 글을 처음부터 따라하고 싶으면 React 설치 링크 참고하세요.)

프로젝트 구조

리액트를 설치하고 나면 위처럼 디렉토리 구조가 나올 거임. 우리가 주로 만질 건 src 디렉토리입니다.

대충 봐도 알겠죠? App.css는 App.jsx의 스타일 파일이고, App.jsx가 우리가 코드 쓸 메인 컴포넌트임. main.jsx가 전체 프로젝트의 진입점(Main entry), index.css는 전체 페이지의 스타일을 담당해요.
전 오늘 App.css랑 App.jsx만 만졌습니다.

이제 코드를 써보자

음... 우선 index.css 내용은 다 지웁시다. 그리고 App.jsx 파일을 열어서 다음과 같이 수정해 보세요.

import { useState } from 'react'
import './App.css'

function App() {
  return (
    <div>
      <div className='box'>
        Box1  
        벨로그
      </div>
    </div>
  );
}

export default App

그다음, App.css 파일에 다음과 같은 스타일을 추가합니다.

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

이렇게 하고 나면 아래처럼 생긴 작은 박스가 하나 생길 거예요.

박스 여러 개 생성해보기

위 코드를 반복해서 박스를 여러 개 만들어 볼까요? App.jsx를 다음과 같이 수정해 보세요.

import { useState } from 'react'
import './App.css'

function App() {
  return (
    <div>
      <div className='box'>Box1 벨로그</div>
      <div className='box'>Box2 벨로그</div>
      <div className='box'>Box3 벨로그</div>
      <div className='box'>Box4 벨로그</div>
      <div className='box'>Box5 벨로그</div>
      <div className='box'>Box6 벨로그</div>
    </div>
  );
}

export default App

이렇게 하면 박스가 6개 나옵니다.

컴포넌트로 코드 줄이기

근데 이거 좀 불만인게요...
같은 코드를 계속 반복하면 너무 길고 보기 불편하잖음; 근데 이 때, 리액트의 장점이 사악 나옵니다. 무려 컴포넌트로 코드를 재활용할 수 있음!

컴포넌트 만들기

src 디렉토리 안에 Box.jsx 파일을 하나 만들어 보세요. 그리고 다음 코드를 입력해 주세요

import React from "react";

function Box() {
  return (
    <div className='box'>
      Box1  
      벨로그
    </div>
  );
}

export default Box

이제 App.jsx 파일을 열어서, 박스를 반복적으로 만들지 말고 Box 컴포넌트를 여러 번 사용해 봅시다.

import './App.css';
import Box from './Box'; // Box 컴포넌트 불러오기

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

export default App;

이렇게 하면 Box를 편하게 호출할 수 있어요. 같은 박스를 반복해서 App.jsx 에다가 그 큰 코드를 안 박아도 되고, 그냥 컴포넌트로 분리해서 훨씬 간단하게 코드를 짤 수 있습니다. 이러면 유지보수도 쉬워지겠죠? 걍 컴포넌트만 수정하면 됨.

이게 아까 말 안 했던 컴포넌트의 가장 큰 장점입니다.

근데 또 마음에 안 드는게 있음. 전 Box 뒤 숫자를 다르게 하고 싶고, 벨로그라는 글자도 가각각 다른 글자로 바꾸고 싶어요. 이거 못하면 컴포넌트가 의미가 있음? 근데 할 수 있어서 의미는 있습니다.

props

일단 작성해놓고 볼까요?

// Box.jsx
import React from "react";

function Box(props) {
  return (
    <div>
      <div className='box'>
        Box{props.num}
        {props.name}
      </div>
    </div>
  );
}

export default Box

// App.jsx
import { useState } from 'react'
import './App.css'
import Box from "./Box"

function App() {
  return (
    <div>
      <Box name="로지텍" num="1"/>
      <Box name="십만원" num="2"/>
      <Box name="마우스" num="3"/>
    </div>
  );
}

export default App

하나하나 설명해보겠습니다..

props가 뭡니까?

props는 컴포넌트에서 데이터를 전달하는 매개변수 비스무리한 거에요. 쉽게 말하면, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는 역할을 해요. 여기서는 App.jsx가 부모 컴포넌트, Box.jsx가 자식 컴포넌트입니다.

코드 설명

Box 컴포넌트
function Box(props)
이 부분에서 props를 함수의 인자로 받아요. props라는 객체 안에 부모 컴포넌트에서 넘겨준 데이터가 담깁니다.
{props.num}, {props.name}
여기서 props.num과 props.name을 사용해 데이터를 출력하고 있죠? 즉, App.jsx에서 Box 컴포넌트에 넘긴 name과 num 값을 각각 불러오는 겁니다.
App 컴포넌트
App에서 Box 컴포넌트를 호출할 때 name과 num이라는 속성(props)을 넘겨줬어요. 예를 들면<Box name="로지텍" num="1"/> 이런 코드가 있어요. 여기서 name 속성에는 "로지텍", num 속성에는 "1"이라는 값을 전달했죠? 이 값들이 props라는 이름의 객체에 { name: "로지텍", num: "1" } 형태로 담겨서 Box 컴포넌트로 전달됩니다.
결과적으로, 각 Box 컴포넌트에서는 부모 컴포넌트에서 넘겨준 데이터를 props를 통해 받아서 화면에 표시하게 됩니다.