React (1) - React 이해하기

1. React란 무엇인가?

React를 처음 공부하면 가장 먼저 헷갈리는 부분이 있습니다.

JavaScript도 있고 HTML도 있는데, 굳이 React라는 것을 또 배워야 하는 이유가 무엇일까요?

 

React는 새로운 프로그래밍 언어가 아닙니다.

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리​입니다.

웹사이트에서 우리가 보는 버튼, 검색창, 메뉴, 상품 목록, 로그인 영역 같은 화면 요소를 체계적으로 만들고 관리할 수 있도록 도와주는 기술이라고 생각하면 이해하기 쉽습니다.

 

React를 이해할 때 중요한 것은 문법을 먼저 외우는 것이 아닙니다.

기존 웹 개발에서 어떤 문제가 있었고 React가 그 문제를 어떻게 해결하려고 하는지부터 이해해야 합니다.

 

2. JavaScript가 있는데 React는 왜 필요할까?

HTML, CSS, JavaScript만으로도 웹사이트를 만들 수 있습니다.

각 기술의 역할을 단순하게 나누면 다음과 같습니다.

기술	주요 역할
HTML	웹페이지의 구조
CSS	디자인과 화면 배치
JavaScript	사용자 동작과 기능 처리
React	복잡한 UI와 상태를 체계적으로 관리

버튼 몇 개가 있고 화면 변화가 거의 없는 웹사이트라면 React 없이 JavaScript만으로도 필요한 기능을 구현할 수 있습니다.

문제는 서비스가 복잡해질 때 발생합니다.

 

예를 들어 쇼핑몰 사용자가 상품 하나를 장바구니에 넣었습니다. 그러면 화면에서는 어떤 일이 발생할까요?

• 장바구니에 상품이 추가되고, 상단 장바구니 아이콘의 숫자가 바뀌고, 상품의 재고 상태가 달라질 수 있습니다.
• 로그인하지 않은 사용자라면 로그인 화면을 보여줘야 할 수도 있습니다.
• 즉 하나의 행동이 여러 화면 요소에 영향을 줍니다.
• 서비스가 커질수록 개발자가 직접 모든 화면의 변화를 관리하기 어려워집니다.

React는 바로 이런 상황에서 강점을 가집니다.

 

3. React의 핵심은 화면을 작은 단위로 나누는 것이다

React를 이해하기 위해 가장 먼저 알아야 하는 개념이 컴포넌트(Component)​입니다.

컴포넌트는 쉽게 말하면 화면을 구성하는 독립적인 부품입니다.

 

쇼핑몰 화면을 예로, 하나의 웹페이지처럼 보이지만 개발자의 관점에서는 다음과 같이 나눌 수 있습니다.

[React 컴포넌트 구조]

• Header, 검색창, 장바구니, 상품 정보, 리뷰 등을 각각 하나의 컴포넌트로 만들 수 있습니다.
• 그리고 Header 안에서도 다시 Logo, 검색창, 장바구니 버튼처럼 더 작은 컴포넌트로 나눌 수 있습니다.
• 레고 블록을 조립해서 하나의 큰 구조물을 만드는 것과 비슷합니다.
• 이렇게 구성하면 특정 기능을 수정할 때 거대한 페이지 전체를 살펴보기보다 해당 컴포넌트를 중심으로 확인할 수 있습니다.
• 또한 반복되는 UI를 재사용하기에도 유리합니다.

 

4. 컴포넌트를 사용하면 무엇이 좋아질까?

예를 들어 쇼핑몰에 상품이 100개 있고 상품마다 상품명, 가격, 이미지, 구매 버튼이 필요합니다.

100개의 상품 화면을 각각 만드는 것보다 하나의 상품 컴포넌트를 만들고 상품마다 다른 데이터만 전달하는 방식이 훨씬 효율적입니다.

 

이 방식의 장점은 크게 세 가지입니다.

• 반복되는 UI를 재사용할 수 있다.
• 기능별로 코드를 분리하기 쉽다.
• 서비스 규모가 커져도 유지보수가 상대적으로 편해진다.

React가 대규모 프론트엔드 개발에서 많이 활용되는 이유 중 하나가 바로 이러한 컴포넌트 기반 구조입니다.

 

하지만 여기서 한 가지 궁금증이 생깁니다.

같은 상품 컴포넌트를 사용하면서 어떻게 상품마다 서로 다른 이름과 가격을 보여줄 수 있을까요?

여기서 Props라는 개념이 등장합니다.

 

5. Props란 무엇인가?

Props는 컴포넌트에 필요한 정보를 전달하는 방법입니다.

 

예를 들어 동일한 상품 컴포넌트를 사용한다고 생각해보겠습니다.

첫 번째 상품에는 다음 정보가 필요합니다.

• 상품명: 노트북
• 가격: 150만 원

두 번째 상품에는 다음 정보가 필요합니다.

• 상품명: 키보드
• 가격: 10만 원

화면 구조는 동일하지만 보여줘야 하는 데이터는 다릅니다.

이때 상품명이나 가격처럼 컴포넌트에 전달되는 데이터를 Props라고 이해하면 쉽습니다.

 

구조를 그림으로 표현하면 다음과 같습니다.

React에서는 이런 방식으로 부모 컴포넌트에서 자식 컴포넌트로 필요한 정보를 전달할 수 있습니다.

 

Props가 외부에서 전달되는 정보라면, 컴포넌트 내부에서 계속 변하는 정보는 어떻게 관리할까요?

이때 등장하는 것이 State입니다.

 

6. State란 무엇인가?

State = 현재 화면이 어떤 상태인지 결정하는, 변할 수 있는 값

 

쇼핑몰에서 사용자가 선택한 상품 수량을 생각해보겠습니다.

현재 수량이 1개였다가 사용자가 2개로 변경했다면, 상품 수량이라는 상태(State)가 변경된 것입니다.

 

웹페이지에는 사용자의 행동에 따라 계속 변하는 값(State로 관리할 수 있는 대표적인 값)

• 로그인 여부
• 장바구니 상품 개수
• 메뉴의 열림·닫힘 상태
• 선택한 상품 옵션
• 검색어
• 팝업창의 열림·닫힘 여부

결국 State는 “현재 화면이 어떤 상태인지 나타내는 변화 가능한 데이터”라고 이해하면 쉽습니다.

 

React에서 중요한 흐름은 다음과 같습니다.

 

이것이 React의 중요한 특징인 선언적 UI와 연결됩니다.

 

7. Props와 State는 어떻게 다를까?

• Props = 부모 컴포넌트가 자식 컴포넌트에 전달하는 값
• State = 컴포넌트가 기억하고 관리하며, 변경되면 UI 갱신에 영향을 주는 상태값

구분	Props	State
핵심 질문	부모에게 전달받았나?	이 컴포넌트가 기억·관리하나?
관리 주체	부모 컴포넌트	State를 가진 컴포넌트
예	부모가 전달한 상품명, 수량	현재 선택된 수량, 메뉴 열림 여부
특징	전달받아 사용 (전달받는 정보)	변경되면 UI에 반영 가능 (변화하는 상태)

 

8. React의 렌더링은 어떻게 동작할까?

렌더링은 React가 현재 데이터와 상태를 기준으로 화면에 무엇을 보여줘야 하는지 계산하는 과정이라고 생각하면 됩니다.

 

예시

• 로그인 상태가 아니면 로그인 버튼을 보여줍니다.
• 사용자가 로그인하면 상태가 변경됩니다.
• 그러면 React는 변경된 상태를 바탕으로 화면을 다시 계산하고 로그인 버튼 대신 사용자 정보를 보여줄 수 있습니다.

전체 흐름을 단순하게 표현하면 다음과 같습니다.

여기에서 중요한 점은 React의 렌더링과 웹페이지 전체 새로고침은 다르다는 것입니다.

State가 변경되면 React는 변경된 상태를 기준으로 UI를 다시 계산하고, 이전 결과와 비교해 실제로 변경이 필요한 부분을 DOM에 반영합니다.

따라서 상태 하나가 바뀌었다고 해서 웹페이지 전체를 다시 불러오는 것은 아닙니다.

 

9. React는 프론트엔드 전체를 담당하는 기술일까?

React는 주로 사용자가 보는 UI를 구성하는 영역에서 사용됩니다.

 

웹 서비스 전체 구조에서 보면 다음과 같은 위치에 있다고 생각할 수 있습니다.

사용자가 버튼을 누르거나 검색어를 입력하는 등의 동작은 React가 관리할 수 있습니다.

하지만 회원 정보를 데이터베이스에 저장하거나 결제를 처리하는 등의 서버 기능은 일반적으로 백엔드에서 처리합니다.

 

따라서 웹 개발을 공부한다면 React만 독립적으로 보기보다 브라우저 → React → API → 백엔드 → 데이터베이스라는 전체 흐름에서 이해하는 것이 좋습니다.

 

10. React와 JavaScript는 무엇이 다른가?

JavaScript는 프로그래밍 언어이고 React는 JavaScript를 이용하는 UI 라이브러리입니다.

쉽게 비유하면 JavaScript가 재료와 도구라면

React는 그 재료와 도구를 이용해서 UI를 체계적으로 만드는 작업 방식과 도구 모음에 가깝습니다.

 

따라서 React를 제대로 사용하려면 JavaScript 기본기를 알고 있어야 합니다.

 

11. React의 장점은 무엇일까?

11.1. 컴포넌트 재사용

• 한 번 만든 UI를 여러 화면에서 재사용할 수 있습니다.
• 버튼, 검색창, 상품 카드처럼 반복적으로 등장하는 요소를 각각 컴포넌트로 만들어 활용할 수 있습니다.

11.2. 복잡한 UI 상태 관리

• 웹 서비스가 복잡해지면 화면에서 관리해야 할 상태도 많아집니다.
• React는 상태를 기준으로 화면을 구성하는 구조를 제공하기 때문에 변화가 많은 UI를 체계적으로 개발하는 데 도움이 됩니다.

11.3. 역할별 코드 분리

• 하나의 거대한 화면을 여러 컴포넌트로 나눌 수 있습니다.
• 프로젝트가 커졌을 때 기능을 이해하고 수정하는 데 유리합니다.

 

12. React를 한 장으로 정리하면

지금까지 설명한 내용을 하나의 구조로 연결하면 다음과 같습니다.

 

 

컴포넌트가 화면을 구성하고, Props로 데이터를 전달하며, State가 변화하면 React가 화면을 다시 계산한다.

React의 여러 기능은 결국 이 기본 구조를 중심으로 연결됩니다.

 

[참고 1] 선언적 UI란 무엇인가?

• 기존 명령형 접근 예시:
  • 장바구니 숫자가 바뀌었으니까 화면에서 장바구니 영역을 찾아 숫자를 변경하자.

• React 접근 예시
  • 장바구니 상품이 3개라면 화면은 이런 모습이어야 한다.

즉 개발자가 화면을 어떻게 하나씩 변경할 것인지 지시하기보다 현재 데이터와 상태를 기준으로 화면이 어떤 모습이어야 하는지 정의하는 것입니다. React가 상태 변화를 확인하고 필요한 UI 변경을 처리합니다.

[참고 2] Virtual DOM은 무엇인가?

브라우저가 실제로 화면을 표현하기 위해 관리하는 구조를 DOM(Document Object Model)이라고 합니다.

React는 UI를 계산한 뒤 이전 결과와 새로운 결과의 차이를 확인하고 실제 DOM에 필요한 변경 사항을 반영합니다.

개념적으로는 다음과 같이 이해할 수 있습니다.

 

[참고 3] Hooks는 무엇인가?

대표적으로 useState, useEffect, useRef 같은 이름을 볼 수 있습니다.

Hooks는 React 컴포넌트에서 상태 관리나 외부 시스템과의 동기화 같은 React 기능을 사용할 수 있게 해주는 기능입니다.

예를 들어 State를 관리하거나 특정 값을 기억하거나 외부 시스템과 연결하는 작업 등에 Hooks가 사용됩니다.