이 글은 2026년 3월 12일 학습한 내용을 정리한 글입니다.

1. Bootstrap vs Tailwind

CSS 프레임워크로 많이 사용되는 Bootstrap과 Tailwind의 차이를 비교해 보았다.

Bootstrap

• 미리 만들어진 컴포넌트 기반 CSS 프레임워크
• 버튼, 카드, 그리드 등 정해진 스타일을 빠르게 사용 가능
• 클래스만 붙이면 UI를 쉽게 만들 수 있음

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">

Tailwind

• 유틸리티 클래스 기반 CSS 프레임워크
• 작은 스타일 단위를 조합해서 UI를 구성
• 커스터마이징이 자유로운 편

<script src="https://cdn.tailwindcss.com"></script>

2. Tailwind JIT (Just In Time)

Tailwind의 JIT 모드는 필요한 CSS만 실시간으로 생성하는 방식이다.

이를 통해 빌드 속도가 빨라지고, 임의의 값도 바로 사용할 수 있다.

예시

<button class="hover:bg-white bg-[#999999] p-[1px_10px_5px_10px] 
rounded-[15px] hover:text-black">
   버튼 이름
</button>

이와 같은 방식으로 반응형 이벤트 메뉴 UI를 구현해 보았다.

3. Tailwind에서 Pretendard 폰트 적용

Tailwind에서도 일반 CSS와 동일하게 폰트를 import 후 font-family로 적용할 수 있다.

@import url("Pretendard");
 
body {
  font-family: "Pretendard", sans-serif;
}

React

4. 언제 useRef를 사용해야 할까?

React에서 상태를 저장하는 방법은 useState와 useRef가 있다.

기본 기준

• 기억 유지 + UI 노출 O → useState
• 기억 유지 + UI 노출 X → useRef

또한 useRef는 DOM 직접 접근에도 사용 가능하다.

5. useState vs useRef

6. 일반 Hook vs Custom Hook

일반 Hook

React에서 기본적으로 제공하는 Hook

예시

• useState
• useEffect
• useRef

Custom Hook

개발자가 재사용 가능한 로직을 만들기 위해 직접 만드는 Hook

특징

• 반드시 use로 시작
• 여러 Hook을 조합하여 로직 재사용

function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

7. Custom Hook 이름이 use로 시작하는 이유

1. React가 Hook으로 인식하기 위해\
2. React Hook 규칙을 적용받기 위해\
3. ESLint의 react-hooks/rules-of-hooks 규칙 적용 때문

8. 일반 함수 vs Custom Hook

일반 함수에서는 React Hook을 사용할 수 없다.

// ❌ 일반 함수
function normalFunction() {
  const [count, setCount] = useState(0); // 에러 발생
}

하지만 Custom Hook에서는 가능하다.

// ✅ Custom Hook
function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

9. React Todo 프로젝트

로컬 환경에서 React로 Todo List를 구현하였다.

• 할 일 추가
• 할 일 삭제
• 체크 상태 관리
• 할 일 고유 ID 추가
• 간단한 UI 구현

React의 상태 관리(useState) 와 컴포넌트 구조를 직접 적용해보는 연습이 되었다.

아래 이미지는 간단한 UI 구현이다.

10. 팀 프로젝트 회의

팀플 두 번째 모임을 진행했다.

• Notion 팀 페이지 생성
• Notion 팀 페이지 구조 설계
• 간단한 아이스브레이킹

이후 팀원들과 함께 일정 관리, 회의 기록, 규칙 등의 구조를 정리하였다.