리액트(React)는 페이스북이 만든 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리입니다.
하지만 이렇게 말해도 아직 감이 안 올 수 있어요. 그래서 차근차근 풀어볼게요.
👀 웹사이트는 어떻게 동작할까?
웹사이트는 기본적으로 아래와 같은 흐름으로 동작해요:
- 사용자가 버튼을 누른다
- 화면의 어떤 내용이 바뀐다
- 이걸 위해 HTML/CSS/JavaScript가 협력한다
여기서 문제가 생깁니다.
- 버튼을 누를 때마다 화면을 직접 조작(DOM 조작) 해야 해요.
- 상태가 많아질수록 코드가 복잡해지고 실수하기 쉬워요.
😓 전통적인 방식
- 사용자가 버튼을 누름
- JavaScript가 직접
<div>의 텍스트를 바꿔줌 - 여러 개의 상태를 일일이 추적해야 함
🎉 그래서 나온 게 리액트!
리액트는 이걸 훨씬 깔끔하고 효율적으로 처리할 수 있게 해줘요.
- 데이터(state)가 바뀌면
- 리액트가 자동으로 UI를 다시 그려줘요
“데이터 중심”으로 UI를 만드는 방식이라고 생각하면 돼요.
🔁 비유로 이해해보자
리액트를 처음 배우는 사람에게 가장 좋은 비유는 ‘자동 계산기’예요.
- 계산기에 숫자를 입력하면 자동으로 결과가 갱신되죠?
- 우리가 버튼을 누를 때마다 결과를 다시 계산할 필요는 없어요.
- 리액트는 화면도 이렇게 자동으로 다시 계산해주는 도구예요.
🧩 리액트의 핵심 요소 3가지
리액트는 크게 아래 3가지로 구성돼요:
| 요소 | 설명 |
|---|---|
| 컴포넌트 (Component) | 재사용 가능한 UI 조각 |
| 상태 (State) | 변할 수 있는 데이터 |
| 렌더링 (Rendering) | 데이터를 기반으로 화면을 그리는 일 |
📦 간단한 예제 코드
function Welcome() {
return <h1>안녕하세요, React!</h1>;
}
이건 “Welcome”이라는 이름의 컴포넌트를 정의한 거예요.<Welcome />이라고 쓰면 화면에 “안녕하세요, React!”가 나타나죠.
👉 마치 내가 HTML 태그를 새로 만든 것처럼 쓸 수 있어요.
- 사용자 입력 →
- 상태(state)가 바뀜 →
- 리액트가 새로운 UI를 계산 →
- 화면이 자동으로 업데이트됨
이 모든 걸 리액트가 자동으로 해주는 게 핵심이에요.
✅ 정리
- 리액트는 데이터 중심으로 UI를 만드는 도구예요.
- 복잡한 화면도 더 예측 가능하고 효율적으로 만들 수 있어요.
- 컴포넌트와 상태를 기반으로 작동하며, 변화에 따라 UI를 다시 그려줘요.