0813 React 수업

React (Chapter 5-8)

Chapter 5: React Events

여기서는 React에서 이벤트를 처리하는 방법을 다룬다. 예를 들어, 버튼을 클릭하는 것 같은 사용자 이벤트를 처리하고, 어떻게 이벤트 핸들러를 컴포넌트에 연결할 수 있는지 알아본다.

App.jsx

import React from 'react';
import Button from './components/Button';
import Header from './components/Header';

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <Header />
      <Button onClick={handleClick} label="Click Me" />
    </div>
  );
}

export default App;

Button.jsx

import React from 'react';

function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

export default Button;

---

Chapter 6: React State

이 Chapter에서는 React의 state 관리를 알아본다. state를 사용해 컴포넌트의 동적 데이터를 관리하고, 이를 UI에 반영하는 방법을 살펴본다.

App.jsx

import React from 'react';
import Counter from './components/Counter';
import Lighter from './components/Lighter';

function App() {
  return (
    <div>
      <Counter />
      <Lighter />
    </div>
  );
}

export default App;

Counter.jsx

import React, { useState } from 'react';

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

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

export default Counter;

---

Chapter 7: Form State Management

여기서는 form state 관리를 다룬다. 입력 필드의 state를 추적하고, 사용자가 입력한 데이터를 처리하는 방법을 보여준다.

App.jsx

import React from 'react';
import Register from './components/Register';

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

export default App;

Register.jsx

import React, { useState } from 'react';

function Register() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Registered name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button type="submit">Register</button>
    </form>
  );
}

export default Register;

---

Chapter 8: Using React Refs

React에서 ref를 어떻게 사용하는지 알아본다. ref를 사용해 DOM 요소에 직접 접근하고, 이를 조작하는 방법을 설명한다.

App.jsx

import React from 'react';
import Main from './components/Main';

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

export default App;

Main.jsx

import React, { useRef } from 'react';

function Main() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me with button" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default Main;

---

이렇게 해서 event 처리, state 관리, form state 관리, 그리고 ref 사용에 대해 알아봤다. 이 개념들은 모두 React 애플리케이션을 개발할 때 중요한 부분을 차지한다.