⭐ 1편 — 리액트(React)를 처음 시작할 때 가장 먼저 알아야 할 핵심 개념들

⭐ 1편  리액트(React)를 처음 시작할 때 가장 먼저 알아야 할 핵심 개념들

리액트를 처음 배우려는 사람들이 가장 많이 하는 고민은 “어디서부터 시작해야 할까?” 입니다.
문서도 많고 영상도 많은데, 정작 핵심이 무엇인지 모르면 공부 방향이 흔들리고 금방 지치게 됩니다. 

저 역시 리액트를 처음 접했을 때 똑같은 시행착오를 겪었어요. 그래서 이번 글에서는 리액트를 가장 효율적으로 이해할 수 

있는 첫 출발점만 모아서 차근차근 설명해 보려고 합니다.

✅ 리액트가 왜 많이 쓰일까?

리액트는 ‘화면을 만드는 라이브러리’입니다.
그런데 단순히 화면만 만드는 것이 아니라, 데이터가 바뀌면 필요한 부분만 다시 그려주는 구조 덕분에 개발자들이 정말 편해졌습니다.
예를 들어, 전통적인 방식(jQuery 같은 DOM 직접 조작)은
어떤 요소가 바뀌는지
어떻게 찾아가서 교체할지
이벤트가 꼬이지는 않는지
등을 하나하나 신경 써야 했습니다.
하지만 리액트는 이런 부담을 줄여줍니다.
✔ 필요한 곳만 자동으로 업데이트
✔ 복잡한 화면도 컴포넌트 단위로 쪼개서 관리
✔ 재사용이 쉬움
✔ 대규모 프로젝트에 강함
그래서 요즘 기업들은 거의 필수로 리액트를 사용합니다.

✅ 리액트에서 가장 중요한 개념 3가지

많은 개념이 있지만, 리액트를 제대로 이해하려면 아래 세 가지는 반드시 잡고 가야 합니다.
1) 컴포넌트(Component) — 화면을 만드는 작은 블록
리액트의 시작은 컴포넌트입니다.
컴포넌트란 화면을 구역별로 조각낸 하나의 단위라고 보면 됩니다.
예를 들어,
버튼 하나, 로그인 폼헤더, 게시판 리스트
모두 컴포넌트로 만들 수 있습니다.
컴포넌트가 중요한 이유는 단순합니다.
한 번 만들면 여기저기 재사용 가능하고, 유지·보수도 편하다는 것.

 

function Welcome() {
   return <h1>안녕하세요! 리액트에 오신 걸 환영합니다.</h1>;
}

이런 함수 하나가 하나의 화면 조각이 되는 겁니다.

2) Props — 부모가 자식에게 주는 데이터
props는 “외부에서 전달받는 값”입니다.
컴포넌트 간의 데이터 흐름을 이해하는 핵심 개념이에요.
function Welcome({ name }) {
   return <h1>{name}님 환영합니다!</h1>;
}
<Welcome name="유경상" />
이렇게 name 값을 외부에서 넘겨받아 동적으로 글자를 바꿀 수 있습니다.
프로젝트가 커질수록 props의 활용 폭도 커지고, 구조화가 매우 중요해집니다.

3) State — 컴포넌트 내부에서 관리하는 값
props가 외부에서 받는 데이터라면,
state는 컴포넌트 자신이 갖고 있는 내부 데이터입니다.
const [count, setCount] = useState(0);
버튼을 누르면 숫자가 증가하는 예제도 모두 이 state로 구현됩니다.
리액트는 state가 바뀌면 화면의 필요한 부분만 “자동으로” 업데이트해줍니다.

✅ 리액트가 화면을 업데이트하는 방식: 리렌더링 개념

처음 리액트를 접하는 사람들은 “왜 함수가 계속 실행되지?” 하고 놀라곤 합니다.
이건 리액트의 구조 때문입니다.
리액트는
state나 props가 변하면 → 컴포넌트를 다시 렌더링하여 화면을 재구성합니다.
이 구조 때문에 개발자는 DOM 조작을 직접 하지 않아도 됩니다.
하지만 이 개념을 잘못 이해하면 성능 문제가 발생할 수 있어서,
후속 글에서 ‘리렌더링 최적화’ 파트를 별도로 다룰 예정입니다.

✅ JSX — HTML처럼 보이지만 사실은 JavaScript

JSX는 리액트를 처음 배울 때 가장 신기해하는 부분입니다.
return (
<div>
<h1>Hello React!</h1>
</div>
);
겉보기에는 HTML처럼 보이지만, 사실 내부적으로는 JavaScript입니다.
덕분에 코드가 훨씬 읽기 쉽고 직관적이에요.

✅ 리액트를 배우기 전에 알아두면 좋은 것들

리액트는 자바스크립트를 기반으로 돌기 때문에
다음 기본기들이 있으면 훨씬 빠르게 익힐 수 있습니다.
✔ ES6 문법
✔ let/const
✔ 함수 표현식
✔ 배열 함수(map, filter 등)
✔ 비동기 처리(Promise, async/await)
이 부분을 어느 정도 알고 시작하면 속도가 매우 빨라집니다.

✨ 마무리: 리액트의 핵심은 “데이터 흐름” 이해하기

리액트를 실제로 사용하다 보면 결국 데이터가 어떻게 이동하고 바뀌는지가 가장 중요합니다.
컴포넌트, props, state — 이 세 가지 개념만 제대로 이해해도
리액트의 60%는 이미 잡았다고 말할 수 있습니다.
다음 글에서는 리액트 컴포넌트를 더 깊게 파고들어 구조와 패턴을 다뤄볼게요.
실제 프로젝트에서도 많이 쓰이는 구조들을 예시로 보여드릴게요.