React 개발을 위해 반드시 알아야 할 5가지 핵심 기본 문법

1. JSX (JavaScript XML)

JSX는 자바스크립트 확장 문법으로, HTML과 매우 유사하게 생겼지만 몇 가지 엄격한 규칙이 있습니다.

• 반드시 하나의 부모 태그로 감싸야 함: 여러 요소를 반환할 때는 <div>나 빈 태그인 <> </> (Fragment)로 감싸야 합니다.
• 카멜 케이스(CamelCase) 사용: HTML의 class는 className으로, onclick은 onClick으로 작성합니다.
• 자바스크립트 표현식은 중괄호 { } 사용: 변수나 함수를 HTML 사이에서 사용할 때 필수입니다.

JavaScript

 

function Profile() {
  const name = "Gemini";
  return (
    <div className="container">
      <h1>Hello, {name}</h1> {/* 변수 사용 */}
    </div>
  );
}

---

2. 컴포넌트 (Components)

UI를 구성하는 독립적인 단위입니다. React는 모든 것이 컴포넌트의 조립으로 이루어집니다.

• 함수형 컴포넌트: 현재 표준이며, 함수 이름의 첫 글자는 반드시 대문자로 시작해야 합니다.
• 재사용성: 한 번 만든 컴포넌트는 다른 곳에서 태그처럼 (<MyComponent />) 여러 번 불러올 수 있습니다.

---

3. Props (속성)

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 '매개변수' 같은 개념입니다.

• 읽기 전용: 자식 컴포넌트는 받은 Props를 직접 수정할 수 없습니다. (수정하려면 부모가 함수를 내려줘야 함)

JavaScript

 

// 자식 컴포넌트
function Welcome(props) {
  return <h2>안녕하세요, {props.userName}님!</h2>;
}

// 부모 컴포넌트
function App() {
  return <Welcome userName="길동" />;
}

---

4. State (상태)

컴포넌트 내부에서 보유하고 있는 **'변할 수 있는 데이터'**입니다. 이 데이터가 바뀌면 React가 화면을 다시 그립니다.

• useState 훅: 가장 대표적인 상태 관리 도구입니다.
• 비동기적 업데이트: 상태 변경 함수(setSomething)를 호출한다고 해서 값이 즉시 바뀌는 게 아니라, React가 다음 렌더링 때 반영합니다.

---

5. 조건부 렌더링 & 리스트 렌더링

데이터에 따라 화면을 다르게 보여주거나, 여러 개의 데이터를 뿌려줄 때 사용하는 기법입니다.

• 삼항 연산자: {조건 ? 참일때 : 거짓일때} 형식으로 자주 쓰입니다.
• map() 함수: 배열 데이터를 반복해서 렌더링할 때 사용하며, 이때 각 요소에는 고유한 key 값이 반드시 필요합니다.

JavaScript

 

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

---

💡 React 문법의 전체적인 흐름

1. 컴포넌트로 화면을 쪼개고,
2. JSX로 모양을 그린 뒤,
3. 변하는 데이터는 State에 담고,
4. 부모-자식 간 데이터 교환은 Props로 수행합니다.

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.