[TIL-260122] React 기초: Hook과 SPA, todo 앱 만들기 실습

이 글은 2026년 1월 22일에 작성된 글입니다.

Hook

React v16.8부터 도입된 기능으로, 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.

리액트에서 제공하는 내장 훅(useState, useEffect, ... ) 과 사용자가 직접 정의할 수 있는 Custom Hooks가 있다.

 

• useState: 가장 기본적인 Hook. 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌.
• useEffect: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있음.
• useReducer: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용.
• useMemo: 함수형 컴포넌트 내부에서 발생하는 연산을 최적할 수 있음.
• useCallback: 렌더링 성능을 최적화해야 하는 상황에 사용
• useRef: 특정 컴포넌트에 접근할 수 있는 객체를 사용하기 위한 훅.

---

SPA

SPA(Single Page Application): 한 개의 페이지로 이루어진 애플리케이션.
서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함.

• 장점
  • 새로운 페이지 요청 시 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가짐.
  • 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동이 가능.
  • 트래픽 감소와 속도, 반응성의 향상으로 인해 앱처럼 자연스러운 사용자 경험(UX)를 제공함.
• 단점
  • 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 느림.
  • 자바스크립트 코드가 외부에 노출되는 보안적인 문제가 있음.
  • 검색엔진 최적화(SEO)가 어려움.

SPA는 정보의 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술이므로 페이지의 목적에 따라 방식을 선택해야 함.

 

todo application

간단하게 할 일을 추가, 삭제, 완료할 수 있는 일정 관리 앱을 만들어 보았다. (사실 코드만 따라쳤다..)

실행 화면

---

오늘의 문제 해결

🔴 문제

리액트 훅 각각에 대한 이해가 잘 안되고, 어떤 상황에 어떤 훅을 써야 하는지도 감이 잘 안 온다.

🔎 시도

리액트 훅에 대해 정리한 글을 찾아봤다.

1. https://hawnbin.tistory.com/6
2. https://platypusss.tistory.com/entry/REACT-React-Hooks-%EC%A0%95%EB%A6%AC-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95

✅ 해결

각각의 기능과 사용법에 대해 정리가 되었다.
그 함수가 무엇을 매개변수로 전달받고 무엇을 반환하는 지를 먼저 정리하고 그 후에 사용법에 대해 알아가는게 순서인 것 같다.

💡 알게된 점

Hook	매개변수 (Params)	반환값 (Return)	목적	사용
useState	초기 상태값	[현재상태, 세터함수]	상태 관리	컴포넌트 내에서 변경 가능한 상태를 관리
useEffect	실행함수, [의존성]	undefined or 클린업 함수	Side Effect 처리	렌더링 이후 DOM 조작, API 호출 등 부수 효과(Side Effect)를 수행
useReducer	리듀서함수, 초기값	[현재상태, dispatch함수]	복잡한 상태 업데이트 로직	상태 관리를 보다 구조적으로 할 수 있도록 도와줌
useMemo	계산함수, [의존성]	계산된 값	값 메모이제이션	비용이 높은 계산 결과를 저장(캐싱)하여 성능을 최적화
useCallback	함수, [의존성]	메모이제이션된 함수	함수 메모이제이션	첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줘, 불필요한 컴포넌트 리렌더링을 방지
useRef	초기값	{ current: 값 }	DOM 접근, 값 저장	렌더링과 관계없는 변경 가능한 값({ current: ... })을 저장하거나 DOM에 접근

 

내일부터 프로젝트 시작!인데 리액트가 너무 어렵다...😂