React 기초

1) JSX (JavaScript XML)

React는 JSX를 사용해 UI를 작성합니다. JSX는 HTML과 비슷하지만, JavaScript와 함께 동작하는 특수 문법입니다.

• JSX 기본 문법

function App() {
  const name = "React";

  return (
    <div>
      <h1>Hello, {name}!</h1> {/* 중괄호로 JavaScript 표현식 사용 */}
    </div>
  );
}

export default App;

 

 

2) 컴포넌트

React는 컴포넌트 기반으로 화면을 구성합니다.
컴포넌트는 크게 두 가지 종류가 있습니다.

• 함수형 컴포넌트 (Functional Component)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

 

• 컴포넌트 사용
  다른 컴포넌트에서 컴포넌트를 불러와 사용합니다.

function App() {
  return (
    <div>
      <Welcome name="React" />
    </div>
  );
}

 

 

3) Props (Properties)

Props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 읽기 전용 데이터입니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React Learner" />;
}

 

 

3) State (상태 관리)

State는 컴포넌트 내부에서 데이터를 저장하고 관리하는 방법입니다. React에서는 useState라는 Hook을 사용해 상태를 관리합니다.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

 

 

• useState의 반환값은 상태 변수와 상태를 변경하는 함수입니다.
• setCount()를 호출하면 컴포넌트가 재렌더링됩니다.

 

4) 이벤트 핸들링

React에서 이벤트를 처리하는 방법은 다음과 같습니다.

function ButtonClick() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click Me</button>;
}

 

 

 

5) 조건부 핸들링

특정 조건에 따라 화면에 표시할 내용을 다르게 렌더링할 수 있습니다.

function UserGreeting(props) {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

function App() {
  return <UserGreeting isLoggedIn={true} />;
}