쉬운 설명
초창기 자바스크립트는 사용자가 클릭할 때마다 'DOM의 어느 요소를 어떻게 바꿔라'를 일일이 적어야 했습니다. 페이지가 복잡해지면 그 코드를 사람이 추적하기가 매우 어렵습니다. React는 이걸 뒤집어서, '지금 상태가 이러면 화면이 이렇게 생겼다'를 선언해 두면 React가 자동으로 차이를 계산해 화면을 갱신해 줍니다.
핵심 단어 둘은 컴포넌트와 상태입니다. 컴포넌트는 화면의 한 조각(버튼·카드 등), 상태는 그 조각이 가진 데이터(예: 좋아요 수). 상태가 바뀌면 React가 '필요한 부분만' 다시 그립니다. 사용자는 매끄러운 화면을, 개발자는 단순한 사고 모델을 얻습니다.
코드 작성은 보통 JSX라는 형식으로 합니다. JSX는 자바스크립트 안에 HTML 비슷한 문법을 쓸 수 있게 해 줘서, 한 컴포넌트 안에 화면 모양과 동작 로직이 같이 들어갑니다. 익숙해지면 한 파일을 열어 '이 컴포넌트가 무엇을 그리고 어떻게 동작하는가'를 한눈에 볼 수 있어 효율이 좋습니다.
React 자체는 라이브러리지만, 라우팅·데이터 페치·서버 렌더링까지 묶은 프레임워크(Next.js·Remix 등)와 같이 쓰는 경우가 많습니다. 메타(페이스북)가 만들었고, 모바일 버전인 React Native로 같은 사고방식을 휴대폰 앱에도 적용할 수 있어 한 팀이 웹·iOS·안드로이드를 같은 코드로 만들 수 있습니다.
React를 잘 쓰는 일은 의외로 어렵습니다. 상태가 흩어지면 어디서 어떻게 바뀌는지 추적이 안 되고, 리렌더가 너무 잦으면 성능이 떨어집니다. 그래서 상태를 어디에 둘지(컴포넌트·전역 스토어), 어떤 도구로 관리할지(useState·Context·Redux·Zustand·Jotai 등)를 잘 정하는 것이 중요합니다. 최근에는 서버 컴포넌트가 등장해 '서버에서 일부 컴포넌트를 만들어 보내는' 패턴이 표준에 가깝게 자리잡았습니다.
비유로 보면
React로 UI를 짜는 일은 요리책에 '재료가 이러면 음식이 이렇다'를 적어 두는 것과 비슷합니다. 사람이 매번 어느 단계에서 무엇을 섞으라고 정확히 지시하지 않아도, 재료 목록만 정확하면 같은 결과의 음식이 나옵니다. 재료(상태)를 바꾸면 음식(화면)이 자동으로 따라옵니다.
어디에서 만나나
페이스북·인스타그램·왓츠앱·넷플릭스·에어비앤비·우버·디스코드·노션 — 사용자가 큰 서비스의 상당수가 React로 만들어졌습니다. 모바일에서도 React Native로 인스타그램·페이스북·디스카운트의 일부 화면이 같은 사고방식으로 동작합니다. 작은 스타트업부터 대기업까지 첫 번째 선택지로 자주 거론됩니다.
작은 예시
장바구니 화면을 만들 때 '담은 상품 목록'을 상태로 두고 각 상품을 카드 컴포넌트로 그리면, 사용자가 수량을 +/- 누를 때마다 React가 해당 상품 카드와 합계 영역만 다시 그립니다. 코드에서는 '상태가 이렇게 바뀌면 화면이 이렇게 보인다'만 적었을 뿐, 어떤 요소를 어떻게 갱신할지는 신경 쓸 필요가 없습니다.
자주 하는 오해
한 줄 정리
React의 핵심은 '컴포넌트와 상태'입니다. 이 두 가지 단어로 모든 화면을 설명할 수 있게 되면 React를 어느 정도 익혔다고 볼 수 있습니다.