React를 처음 배우는 사람을 위한 핵심 개념 정리

React를 처음 배우는 사람을 위한 핵심 개념 정리

리액트를 처음 배우는 입장에서 꼭 알고 넘어가야 할 개념들을 정리해봤습니다. 복잡한 개념보다 "왜 이렇게 쓰는가?" 중심으로 설명하니 처음 접하더라도 편하게 읽으실 수 있어요.

---

1. React란?

React는 UI를 만들기 위한 JavaScript 라이브러리입니다.
페이스북에서 만들었고, 컴포넌트 기반으로 동작합니다.

• 빠르게 UI를 렌더링해줌
• 상태 관리에 특화됨
• 복잡한 화면을 작은 컴포넌트 단위로 쪼개서 개발함

2. JSX는 뭘까?

React 코드에서 HTML처럼 보이는 문법:

<script type="text/babel">
function App() {
  return <h1>Hello, React!</h1>;
}
</script>

위 코드는 HTML이 아니라 JSX입니다.
JSX는 JavaScript + XML의 줄임말로, JavaScript 안에 HTML 구조를 쓸 수 있게 해줍니다.

주의할 점:

• class → className
• for → htmlFor

3. 컴포넌트란?

React는 화면을 컴포넌트 단위로 쪼개서 만듭니다.

<script type="text/babel">
function Header() {
  return <h1>내 블로그</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>안녕하세요!</p>
    </div>
  );
}
</script>

<Header />처럼 태그처럼 사용 가능!

4. Props: 컴포넌트에게 값을 전달하는 방법

<script type="text/babel">
function Greeting(props) {
  return <p>안녕하세요, {props.name}님!</p>;
}

function App() {
  return <Greeting name="해중" />;
}
</script>

📌 props는 컴포넌트에 전달하는 데이터입니다. 읽기 전용!

5. State: 컴포넌트 내부에서 바뀌는 값

<script type="text/babel">
import { useState } from "react";

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

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
</script>

📌 useState는 값을 기억하고 바꿀 수 있게 해주는 React 훅(Hook)입니다.
값이 바뀌면 화면이 자동으로 다시 렌더링돼요.

6. 이벤트 처리

<button onClick={() => alert('클릭!')>눌러보세요</button>

React에선 DOM 이벤트 이름을 camelCase(onClick, onChange 등)로 써야 해요.

7. 조건부 렌더링

<script type="text/babel">
function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인 해주세요.</p>}
    </div>
  );
}
</script>

자바스크립트 문법을 그대로 JSX 안에서 쓸 수 있어요.

8. 리스트 렌더링 & key

<script type="text/babel">
const items = ['React', 'Vue', 'Svelte'];

function App() {
  return (
    <ul>
      {items.map((item, idx) => <li key={idx}>{item}</li>)}
    </ul>
  );
}
</script>

map을 사용해서 리스트를 렌더링하고, key는 고유한 값으로 지정해야 합니다.

9. 마무리 정리

개념	설명
JSX	JS 안에 HTML처럼 쓰는 문법
컴포넌트	UI를 쪼개는 최소 단위
Props	컴포넌트에 값 전달
State	컴포넌트 내부에서 변화하는 값
이벤트 처리	사용자 액션에 반응하는 방식
조건 렌더링	조건에 따라 다른 UI 보여주기
리스트 렌더링	반복되는 항목 출력 (map 사용)

💡 React를 배우며 자주 묻는 질문들

• Q. props는 부모 → 자식만 가능할까?
  ✅ 네. 단방향입니다. 자식 → 부모로 데이터를 넘기려면 이벤트로 처리해야 해요.
• Q. useState는 꼭 import 해야 하나요?
  ✅ 맞아요. import {'{ useState }'} from 'react'로 불러와야 작동해요.

✍️ 마치며

React는 어렵지 않습니다. 다만, 처음에는 개념이 생소해서 복잡하게 느껴질 뿐이에요.
위 개념들만 확실히 이해하고 시작하면 그 다음은 비교적 수월합니다.

React를 이해하는 가장 좋은 방법은 직접 작고 단순한 UI를 만들어보는 것입니다.
예: 간단한 계산기, 투두리스트, 카운터 만들기 등