이 글은 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
구분 useState useRef
용도 UI 상태 관리 UI에 영향 없는 값 저장
리렌더링 변경 시 리렌더링 리렌더링 없음
접근 방식 state 변수 ref.current
DOM 접근 불가능 가능
사용 예시 폼 입력값, todo 목록 타이머 ID, 포커스 제어
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로 시작하는 이유
- React가 Hook으로 인식하기 위해\
- React Hook 규칙을 적용받기 위해\
- 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 팀 페이지 구조 설계
- 간단한 아이스브레이킹
이후 팀원들과 함께 일정 관리, 회의 기록, 규칙 등의 구조를 정리하였다.
