React입문 -> 고수로 가는 필수 개념

1️⃣ React는 화면을 빠르게 바꾸는 JS 라이브러리

bash

복사편집

npm create vite@latest

→ Vite로 설치하면 빠르고 가벼운 개발 환경이 만들어져요.

---

2️⃣ JSX는 JS 안에서 HTML처럼 코드를 짜는 문법

jsx

복사편집

const element = <h1>Hello</h1>;

→ HTML처럼 생겼지만, class → className 등 문법 차이 주의!

---

3️⃣ 컴포넌트는 화면의 부품 단위

jsx

복사편집

function Hello() { return <p>안녕하세요</p>; }

→ 함수처럼 만들고 <Hello />처럼 태그로 사용할 수 있어요.

---

4️⃣ Props는 컴포넌트에 값을 전달하는 방법

jsx

복사편집

function Hello(props) { return <p>{props.name}님 반가워요!</p>; } <Hello name="리아" />;

→ 컴포넌트에 값을 넣어주는 방식 (마치 함수의 인자처럼)

---

5️⃣ State는 화면과 함께 바뀌는 값을 저장하는 공간

jsx

복사편집

const [count, setCount] = useState(0); setCount(count + 1);

→ 값이 바뀌면 화면도 같이 업데이트돼요.

---

6️⃣ 이벤트는 사용자 행동에 반응하는 코드

jsx

복사편집

<button onClick={() => alert("눌렀어요!")}>버튼</button> <input onChange={(e) => console.log(e.target.value)} />

→ onClick, onChange 등 camelCase로 작성해야 작동해요.