React Keyword

---

🔑 React에서 자주 보는 키워드

정의

React 키워드는 컴포넌트 선언, 상태 관리, 렌더링 제어, DOM 속성 처리에 자주 쓰이는 표현이다.

React는 일반 JavaScript와 조금 다른 작성 규칙을 쓰는 부분이 있어서, 자주 등장하는 키워드를 익혀두면 문서와 코드를 읽기 쉬워진다.

🧩 export default

• 현재 파일에서 기본으로 내보낼 컴포넌트나 함수를 지정한다.
• 컴포넌트 파일에서 가장 자주 보게 되는 형태다.

export default function App() {
  return <div>App</div>;
}

🧩 className

• HTML의 class 대신 React에서는 className을 사용한다.
• JSX 안에서 JavaScript 예약어와 충돌을 피하기 위한 표현이다.

<div className="box">내용</div>

🧩 useState

• 변경 가능한 상태를 만들 때 사용한다.
• 상태가 바뀌면 해당 컴포넌트가 다시 렌더링된다.

import { useState } from "react";

const [message, setMessage] = useState("Hello");

🧩 useEffect

• 렌더링 이후에 부수 효과를 처리할 때 사용한다.
• 데이터 요청, 이벤트 등록, 초기화 작업에 자주 사용된다.

import { useEffect } from "react";

useEffect(() => {
  console.log("컴포넌트가 마운트됐다.");
}, []);

🧩 value와 onChange

• 입력값을 상태로 연결할 때 자주 함께 사용한다.
• controlled component를 만들 때 기본이 된다.

<input
  type="text"
  value={message}
  onChange={(e) => setMessage(e.target.value)}
/>

🧩 조건부 렌더링

• JSX에서는 if, 삼항 연산자, && 패턴을 자주 사용한다.
• 화면에 보여줄 내용을 조건에 따라 바꿀 수 있다.

{isActive ? <div>짠</div> : <div>안보임</div>}

📌 정리

• React 키워드는 문법 자체보다 실무에서 자주 쓰는 패턴을 이해하는 데 중요하다.
• export default, className, useState, useEffect를 먼저 익히면 된다.
• JSX, Component, EventHandler, Props와 함께 보면 흐름이 잘 잡힌다.

---

연결문서

• React-Syntax
• React-JSX
• React-Component
• React-EventHandler
• React-Props
• React-LifeCycle
• useEffect