React 공부 중입니다~

React란?

자바스크립트를 공부하다 보면 자연스럽게 만나게 되는 기술 중 하나가 React이다. React는 웹 화면을 만들기 위한 자바스크립트 라이브러리이며, 특히 사용자 인터페이스를 효율적으로 구성하고 관리하기 위해 사용된다.

기본적인 HTML, CSS, JavaScript만으로도 웹 페이지를 만들 수 있지만, 화면이 복잡해지고 데이터가 자주 변경되는 웹 애플리케이션을 만들다 보면 코드 관리가 어려워진다. React는 이러한 문제를 해결하기 위해 화면을 작은 단위로 나누고, 데이터 변화에 따라 화면을 효율적으로 다시 그릴 수 있도록 도와준다.

쉽게 말하면 React는 복잡한 웹 화면을 컴포넌트 단위로 관리할 수 있게 해주는 도구이다.

React가 필요한 이유

일반적인 웹 페이지는 HTML로 구조를 만들고, CSS로 디자인을 적용하고, JavaScript로 동작을 추가한다. 단순한 페이지라면 이 방식만으로도 충분하다.

하지만 로그인 상태에 따라 화면이 바뀌거나, 서버에서 받아온 데이터를 목록으로 보여주거나, 사용자가 버튼을 클릭할 때마다 화면의 일부가 변경되는 경우에는 코드가 점점 복잡해진다.

예를 들어 게시판 화면을 만든다고 생각해보면, 글 목록을 보여주고, 글을 클릭하면 상세 내용을 보여주고, 댓글을 작성하면 댓글 목록이 다시 갱신되어야 한다. 이런 기능이 많아질수록 직접 DOM을 찾아서 수정하는 방식은 관리하기 어려워진다.

React는 이런 복잡한 화면 변경을 더 쉽게 처리할 수 있도록 만들어졌다. 개발자는 화면이 어떤 상태일 때 어떻게 보여야 하는지를 작성하고, React는 데이터가 바뀌었을 때 필요한 부분을 알아서 다시 렌더링해준다.

컴포넌트란?

React에서 가장 중요한 개념은 컴포넌트(Component) 이다.

컴포넌트는 화면을 구성하는 하나의 독립적인 조각이라고 볼 수 있다. 버튼, 입력창, 메뉴, 카드, 목록, 팝업 같은 화면 요소들을 각각 컴포넌트로 만들 수 있다.

예를 들어 하나의 웹 페이지를 다음과 같이 나눌 수 있다.

Header는 상단 메뉴를 담당하고, Sidebar는 왼쪽 메뉴를 담당하며, Content는 본문 영역을 담당한다. 그리고 Button, Input, Card 같은 작은 요소들도 각각 컴포넌트로 만들 수 있다.

이렇게 컴포넌트 단위로 화면을 나누면 코드 재사용이 쉬워지고, 수정해야 할 부분을 찾기도 편해진다. 같은 버튼 디자인을 여러 곳에서 사용해야 할 때도 Button 컴포넌트를 하나 만들어두면 여러 화면에서 재사용할 수 있다.

JSX란?

React에서는 JSX라는 문법을 사용한다. JSX는 JavaScript 안에서 HTML과 비슷한 문법을 작성할 수 있게 해주는 문법이다.

처음 보면 HTML을 JavaScript 파일 안에 작성하는 것처럼 보이기 때문에 낯설 수 있다. 하지만 JSX를 사용하면 화면 구조와 관련된 코드를 더 직관적으로 작성할 수 있다.

예를 들면 다음과 같은 형태이다.

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <button>클릭</button>
    </div>
  );
}

위 코드는 HTML처럼 보이지만 실제로는 React가 해석할 수 있는 JSX 문법이다. React에서는 이런 방식으로 컴포넌트가 화면에 어떤 내용을 보여줄지 작성한다.

JSX 안에서는 JavaScript 값을 중괄호 {}로 사용할 수 있다.

function UserName() {
  const name = "홍길동";

  return <p>{name}님 환영합니다.</p>;
}

이처럼 JSX는 HTML 구조와 JavaScript 로직을 함께 사용할 수 있게 해준다.

Props란?

React에서 컴포넌트끼리 데이터를 전달할 때 사용하는 것이 props이다.

props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다. 컴포넌트를 함수라고 생각하면, props는 함수에 전달되는 매개변수와 비슷하다.

예를 들어 Button 컴포넌트에 버튼 이름을 전달하고 싶다면 다음과 같이 사용할 수 있다.

function Button(props) {
  return <button>{props.text}</button>;
}

function App() {
  return <Button text="저장" />;
}

이 코드에서 App 컴포넌트는 Button 컴포넌트에게 text라는 값을 전달한다. Button 컴포넌트는 props.text를 사용해서 버튼 안에 “저장”이라는 글자를 표시한다.

props를 사용하면 같은 컴포넌트라도 전달하는 값에 따라 다른 화면을 보여줄 수 있다.

State란?

React에서 또 중요한 개념은 state이다.

state는 컴포넌트 내부에서 관리하는 상태값이다. 쉽게 말하면 화면에 영향을 주는 데이터라고 생각하면 된다.

예를 들어 버튼을 클릭할 때마다 숫자가 증가하는 카운터를 만든다고 하면, 현재 숫자 값을 state로 관리할 수 있다.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

여기서 count는 현재 상태값이고, setCount는 상태값을 변경하는 함수이다. 버튼을 클릭하면 setCount가 실행되고, count 값이 변경된다. 그러면 React는 변경된 값을 기준으로 화면을 다시 렌더링한다.

state를 이해하면 React에서 화면이 어떻게 바뀌는지 이해하기 쉬워진다.

React의 화면 렌더링 방식

React는 데이터가 변경되면 화면 전체를 무조건 다시 만드는 것이 아니라, 변경이 필요한 부분을 찾아 효율적으로 업데이트한다.

개발자는 직접 DOM을 찾아서 수정하지 않고, 상태값을 변경하기만 하면 된다. 그러면 React가 상태 변화를 감지하고 화면을 다시 렌더링한다.

기존 JavaScript 방식에서는 document.querySelector() 같은 코드를 사용해서 특정 HTML 요소를 찾고 직접 수정해야 했다. 하지만 React에서는 화면을 직접 조작하기보다는, 상태를 변경해서 화면이 자연스럽게 바뀌도록 만든다.

즉, React에서는 “이 버튼을 누르면 이 HTML을 직접 수정한다”라는 방식보다, “상태값이 이렇게 바뀌면 화면은 이렇게 보여야 한다”라는 방식으로 생각하는 것이 중요하다.

React의 장점

React의 가장 큰 장점은 컴포넌트 기반 구조이다. 화면을 작은 단위로 나누어 관리하기 때문에 코드 재사용성이 높고 유지보수가 편하다.

또한 상태 관리가 비교적 명확하다. 화면에 영향을 주는 데이터를 state로 관리하고, 그 값이 변경되면 화면이 다시 렌더링되는 구조이기 때문에 데이터와 화면의 관계를 이해하기 쉽다.

React는 생태계도 매우 크다. 라우팅을 위한 React Router, 전역 상태 관리를 위한 Zustand나 Redux, 서버 상태 관리를 위한 TanStack Query 등 다양한 라이브러리와 함께 사용할 수 있다.

그리고 TypeScript와도 많이 함께 사용된다. TypeScript를 사용하면 props나 state의 타입을 명확하게 지정할 수 있어 코드 안정성을 높일 수 있다.

React를 공부할 때 중요한 개념

React를 공부할 때는 먼저 컴포넌트 개념을 이해하는 것이 중요하다. 화면을 하나의 큰 덩어리로 보는 것이 아니라, 여러 개의 작은 컴포넌트로 나누어 생각해야 한다.

그다음 JSX 문법에 익숙해져야 한다. JSX는 HTML과 비슷하지만 JavaScript 문법과 함께 사용되기 때문에 처음에는 약간 헷갈릴 수 있다.

props와 state도 반드시 이해해야 한다. props는 부모가 자식에게 전달하는 값이고, state는 컴포넌트 내부에서 관리하는 상태값이다. React 화면은 대부분 props와 state를 기준으로 만들어진다.

이벤트 처리도 중요하다. 버튼 클릭, 입력값 변경, 폼 제출 같은 사용자 동작을 처리하는 방법을 알아야 한다.

마지막으로 useEffect 같은 Hook 개념도 공부해야 한다. useEffect는 컴포넌트가 화면에 나타났을 때, 특정 값이 변경되었을 때, 또는 컴포넌트가 사라질 때 실행할 작업을 처리할 수 있게 해준다.

React와 JavaScript의 관계

React는 자바스크립트 라이브러리이기 때문에 자바스크립트 기본기가 중요하다. React를 잘 사용하려면 변수, 함수, 배열, 객체, 조건문, 반복문, 비동기 처리 같은 자바스크립트 개념을 알고 있어야 한다.

특히 배열의 map, filter, find 같은 메서드는 React에서 자주 사용된다. 서버에서 받아온 목록 데이터를 화면에 반복해서 표시할 때 map을 많이 사용한다.

또한 객체 구조 분해 할당, 화살표 함수, 삼항 연산자, spread 문법 같은 최신 JavaScript 문법도 React 코드에서 자주 등장한다.

따라서 React를 공부하기 전에 자바스크립트 기본 문법을 먼저 익히고, React를 공부하면서 필요한 JavaScript 문법을 함께 정리해 나가는 것이 좋다.

정리

React는 웹 화면을 컴포넌트 단위로 만들고 관리할 수 있게 해주는 자바스크립트 라이브러리이다. 복잡한 화면을 작은 단위로 나누어 개발할 수 있기 때문에 유지보수와 재사용성이 좋다.

React에서는 JSX를 사용해 화면 구조를 작성하고, props를 통해 컴포넌트 간 데이터를 전달하며, state를 통해 화면에 영향을 주는 데이터를 관리한다.

처음에는 JSX, props, state, Hook 같은 개념이 낯설 수 있지만, 하나씩 익히다 보면 React가 왜 많이 사용되는지 이해할 수 있다.

앞으로 React를 공부하면서 컴포넌트, JSX, props, state, 이벤트 처리, useEffect, 상태 관리, API 통신 같은 내용을 차근차근 정리해볼 예정이다.

프론트엔드 쪽에서 유명한게 React하고 Vue라고 하던데 React 자료가 더 많고 크로스플랫폼 개발까지 가능할 것 같아서 React 시작하였습니다~

올해 많은 발전이 있었으면 좋겠네요~