🎯 React 관련 개념(컴포넌트, 상태, 훅 등)을 정리합니다.

📗 Today I Learned

컴포넌트

재사용 가능한 UI(User Interface) 조각입니다.

React에서 컴포넌트를 만드는 방식은 두 가지가 있습니다. 하나는 클래스형 컴포넌트, 다른 하나는 함수형 컴포넌트입니다.

ℹ️ 컴포넌트는 이름을 반드시 PascalCase로 작성해야 합니다. 만약 소문자로 시작하면 <div>처럼 HTML 태그로 착각할 수 있기 때문에 주의가 필요합니다.
출처: React 공식 문서

클래스형 컴포넌트

클래스형 컴포넌트는 ES6의 클래스 문법을 사용하여 작성하며, 반드시 render() 메서드를 포함해야 합니다. 이 메서드 안에서 UI를 JSX로 반환합니다.

📄 ClassCom.jsx

import { Component } from 'react';

class ClassCom extends Component {
  render() {
    return <div>클래스형 컴포넌트</div>;
  }
}

export default ClassCom;

📄 App.jsx

클래스형 컴포넌트를 다른 컴포넌트에서 사용하는 예시입니다.

import ClassCom from './ClassCom';

function App() {
  let name = '리액트';

  return (
    <div>
      <ClassCom></ClassCom>
    </div>
  );
}

export default App;

함수형 컴포넌트

ES6의 화살표 함수나 일반 함수로 정의하며, return 문으로 JSX를 반환합니다.

최근에는 React Hooks의 등장으로 함수형 컴포넌트가 표준처럼 사용되고 있습니다.

📄 FuncCom.jsx

function FuncCom() {
  return <div>함수형 컴포넌트</div>;
}

export default FuncCom;

📄 App.jsx

함수형 컴포넌트를 다른 컴포넌트에서 사용하는 예시입니다.

import FuncCom from './FuncCom';

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

export default App;

---

state 사용하기

React에서는 컴포넌트 내부에서 바뀔 수 있는 데이터를 state라고 합니다.

useState는 React에서 제공하는 훅(hook) 중 하나로, 값을 저장할 수 있는 변수 하나와 그 값을 바꾸는 함수 하나를 함께 반환해줍니다.

🤔 훅(Hook)이란?

Hook은 React 기능을 함수형 컴포넌트에서 쓸 수 있게 해주는 특별한 함수입니다. React의 기능을 함수 내부에 "걸어준다(hook into)"는 의미에서 붙여진 이름입니다.

useState 사용 예제

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

export default Counter;

• const [count, setCount] = useState<number>(0) : count는 현재 상태값을 나타내고, setCount는 상태를 업데이트하는 함수입니다.

  • state가 바뀌면 → React가 해당 컴포넌트를 자동으로 다시 렌더링합니다.

• onClick={() => setCount(count + 1)} : 버튼을 클릭할 때마다 count 값을 1씩 증가시킵니다.

⚠️ state는 직접 수정하지 않고, 반드시 set함수를 사용해야 합니다.

count = count + 1 ❌ → setCount(count + 1) ✅

[✨ 추가 개념 ] setState 여러 번 써도 적용되지 않는 이유

React에서 성능을 높이기 위해 상태 업데이트 요청들을 큐에 모아두고 한 번에 처리하기 때문에 1번만 적용이 되기 때문입니다.

[코드 예시]

해당 코드는 +3이 될 거 같지만 실제로는 +1만 수행됩니다.

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

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

이를 적용하기 위해서는 이전 상태에서 업데이트하는 형식으로 바꾸어야 합니다.

function handleClick() {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
}

👉 참고 공식 문서

---

할 일 추가 코드 예제

📄 TodoList.jsx

import { useState } from 'react';
import { Button } from 'react-bootstrap';

type Todo = {
  id: number;
  text: string;
  isChecked: boolean;
};

const TodoList: React.FC = () => {
  const title: string = '오늘 할 일';

  // 할 일 목록 상태값 (초기값 3개로 시작)
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: '공부하기', isChecked: false },
    { id: 2, text: '잠자기', isChecked: false },
    { id: 3, text: '미팅하기', isChecked: false },
  ]);

  const [newTodo, setNewTodo] = useState<string>('');
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);

  // 체크박스 상태를 토글하는 함수
  const handleCheckedChange = (itemId: number) => {
    setTodos((preItems) =>
      preItems.map((item) =>
        item.id === itemId ? { ...item, isChecked: !item.isChecked } : item
      )
    );
  };

  // 새 할 일을 추가하는 함수
  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([
        ...todos,
        {
          id: Date.now(),
          text: newTodo,
          isChecked: false,
        },
      ]);
      setNewTodo('');
    }
  };

  // 할 일을 삭제하는 함수
  const removeTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  // 할 일 클릭 시 상세보기 상태 설정
  const handleTodoClick = (todo: Todo) => {
    setShowDetail(true);
    setSelectedTodo(todo);
  };
  
  // 상세보기 닫기
  const handleCloseDetail = () => {
    setShowDetail(false);
  };

  return (
    <div>
      <h1>{title}</h1>
      <div className='container'>
        {/* 입력창 + 추가 버튼 */}
        <div>
          <input
            type='text'
            placeholder='할 일 입력'
            style={{ marginRight: '10px', writingMode: 'horizontal-tb' }}
            onChange={(e) => {
              setNewTodo(e.target.value);
            }}
          />
          <Button variant='success' onClick={addTodo}>
            추가
          </Button>
        </div>
        {/* 할 일 리스트 */}
        <div className='board'>
          <ul>
            {todos.map((todo, index) => (
              <li key={todo.id}>
                <input
                  type='checkbox'
                  onChange={() => {
                    handleCheckedChange(todo.id);
                  }}
                />
                <span onClick={() => handleTodoClick(todo)}>
                  {todo.isChecked ? <del>{todo.text}</del> : todo.text}
                </span>
                <button
                  onClick={() => removeTodo(todo.id)}
                  className='delbutton'
                >
                  삭제
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default TodoList;

• 할 일 체크박스(handleCheckedChange)

  • isChecked의 값을 논리값을 반전해줍니다.

• 할 일 추가(addTodo)

  • 입력값이 비어있지 않으면, 새 항목을 todos 배열에 추가합니다

  • trim()을 통해 공백만 입력된 경우까지 제한합니다.

• 상세보기(showDetail/ selecyedTodo) 추후에 구현합니다.

---

react-bootstrap

👉 리액트 부트스트랩 getting started

설치 방법

1️⃣ npm으로 react-bootstrap을 설치합니다.

npm install react-bootstrap bootstrap

2️⃣ index.tsx 파일에 css를 불러옵니다

import 'bootstrap/dist/css/bootstrap.min.css';

또는 CDN으로 불러올 수 있습니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
  crossorigin="anonymous"
/>

사용 예제

import { Form, Button } from 'react-bootstrap';

<Form>
  <Form.Group className="mb-3" controlId="todoInput">
    <Form.Label>할 일 입력</Form.Label>
    <Form.Control type="text" placeholder="할 일을 입력하세요" />
  </Form.Group>
  <Button variant="success">추가</Button>
</Form>

---

✏️ 회고

React의 훅에 대해서 아직은 낯설어서 계속 적어보면서 연습해야겠다.