리액트 훅(React Hooks) 완벽 가이드: 함수형 컴포넌트의 진화

혹시 지어진 지 30년이 넘은 오래된 아파트의 복잡한 배전반을 열어보신 적 있으신가요?

수많은 전선이 거미줄처럼 얽혀 있어서, 거실 조명 하나를 고치려 해도 어느 선을 건드려야 할지 막막해지는 경험. 과거의 웹 개발, 특히 리액트(React)의 초기 버전에서 '클래스형 컴포넌트'를 다루던 개발자들의 심정이 딱 이와 같았습니다. 코드가 조금만 길어져도 유지보수가 끔찍하게 어려워졌죠.

지난 10편에서 우리는 리액트의 컴포넌트를 '모듈러 주택'에, Props를 '빌트인 옵션'에, State를 '실내 환경'에 비유하며 화면이 어떻게 구성되는지 알아보았습니다. 그렇다면 오늘은 이 모듈러 주택에 최첨단 스마트홈 IoT 시스템을 설치해 완벽한 자동화를 이뤄내는 마법에 대해 이야기해 보려 합니다.

바로 현대 프론트엔드 개발의 판도를 바꾼 혁명, 리액트 훅(React Hooks)과 함수형 컴포넌트입니다. 지금부터 복잡한 코딩 용어 대신, 부동산 전문가의 시선으로 이 위대한 건축 기술을 아주 쉽고 명쾌하게 풀어드리겠습니다.

무거운 콘크리트에서 가벼운 모듈러로: 함수형 컴포넌트의 대관식

리액트 훅(React Hooks)을 이해하려면 먼저 컴포넌트 건축 방식의 변화를 알아야 합니다. 리액트에는 화면을 그리는 두 가지 건축 공법이 있었습니다.

클래스형 컴포넌트 (과거의 철근 콘크리트 공법): 튼튼하고 모든 기능(상태 관리, 생애주기)을 갖추고 있지만, 설계도가 너무 복잡하고 무겁습니다. 특히 this라는 개념이 마치 미로 같은 배선 구조를 만들어 개발자들을 괴롭혔습니다.
함수형 컴포넌트 (현대의 경량 모듈러 공법): 가볍고, 설계도(코드)가 직관적이며 조립이 쉽습니다. 하지만 치명적인 단점이 하나 있었습니다. 바로 State(상태)를 가질 수 없고, 건물의 생애주기(입주, 리모델링, 철거)를 관리할 수 없다는 점이었습니다.

함수형 컴포넌트는 마치 '전기가 들어오지 않는 예쁜 조립식 창고'와 같았습니다. 가볍고 빠르지만, 실시간으로 변하는 온도(State)를 조절하거나, 사람이 들어올 때 불을 켜는(생애주기) 복잡한 기능을 넣을 수 없었죠. 그래서 과거에는 어쩔 수 없이 무겁고 복잡한 클래스형 컴포넌트를 사용해야만 했습니다.

하지만 2018년, 리액트 16.8 버전에서 '리액트 훅(React Hooks)'이 발표되며 모든 것이 달라졌습니다.

"리액트 훅(Hooks)은 전기가 없던 가벼운 함수형 컴포넌트에 꽂아(Hook) 쓸 수 있는 플러그 앤 플레이(Plug & Play) 방식의 스마트홈 IoT 모듈입니다."

이제 개발자들은 무거운 클래스형으로 건물을 짓지 않아도 됩니다. 가벼운 함수형 컴포넌트를 짓고, 필요한 기능(상태 관리, 생애주기 관리 등)만 '훅(Hook)'이라는 모듈 형태로 쏙쏙 꽂아서 쓰면 되니까요. 이로 인해 프론트엔드 개발 생산성은 비약적으로 상승했습니다.

리액트 훅(React Hooks) 실전: 스마트홈 IoT 시스템의 핵심

리액트에서 제공하는 수많은 훅 중에서, 실무에서 건물의 90% 이상을 통제하는 가장 중요한 두 가지 핵심 훅을 살펴보겠습니다. 바로 useState와 useEffect입니다.

1. 상태 관리의 마법사: useState (스마트 온도 조절기)

useState는 함수형 컴포넌트 안에서 동적인 데이터(State)를 기억하고 변경할 수 있게 해주는 가장 기본적인 훅입니다. 아파트 거실 벽에 붙어 있는 '스마트 온도 조절기'를 떠올려 보세요.

온도 조절기에는 두 가지 핵심 요소가 있습니다.
1. 현재 온도를 보여주는 디스플레이
2. 온도를 올리고 내리는 조절 버튼

useState의 문법도 이와 정확히 일치합니다.


const [현재온도, 온도조절기] = useState(24);
// const [state, setState] = useState(초기값);

여기서 현재온도는 현재 화면에 보여질 값(State)이고, 온도조절기는 이 값을 변경할 수 있는 유일한 스위치(setState 함수)입니다. 괄호 안의 24는 처음 입주했을 때 설정된 기본 온도(초기값)를 의미하죠.

만약 사용자가 버튼을 눌러 온도조절기(26)을 실행하면, 리액트는 즉시 "아! 온도가 변했구나!"라고 인지하고, 화면(가상 돔)의 온도를 26도로 부드럽게 업데이트(재렌더링)합니다. 복잡한 배선 작업 없이, 그저 useState라는 훅 하나를 벽에 꽂아 넣기만 하면 완벽한 상태 관리가 이루어지는 것입니다.

2. 생애주기를 관리하는 만능 집사: useEffect (자동화 관리 시스템)

부동산에서 건물의 가치는 '생애주기(Lifecycle)' 관리에 달려 있습니다. 건물은 준공/입주(Mount)되고, 시간이 흐르며 유지보수/리모델링(Update)되며, 언젠가는 철거(Unmount)됩니다.

웹 애플리케이션의 컴포넌트도 마찬가지입니다. 화면에 처음 나타나고(Mount), 데이터가 변해 화면이 바뀌고(Update), 다른 페이지로 이동하며 화면에서 사라집니다(Unmount). 이 모든 순간을 감지하고 특정 작업을 지시하는 만능 집사가 바로 useEffect입니다.

useEffect는 다음과 같은 상황에서 완벽한 자동화 시스템을 구축합니다.

입주 시점 (Mount): "사용자가 부동산 매물 상세 페이지에 들어오면(컴포넌트가 화면에 나타나면), 즉시 서버에 연락해서 매물 사진과 가격 데이터를 가져와라!"
리모델링 시점 (Update): "사용자가 옵션에서 '전세'를 '월세'로 클릭(State 변경)할 때마다, 대출 이자 계산기를 새로고침해서 보여줘라!"
퇴거 시점 (Unmount): "사용자가 다른 페이지로 떠나면(컴포넌트가 사라지면), 켜두었던 실시간 채팅 연결을 끊고 메모리를 정리해라! (수도와 가스 밸브를 잠그는 작업)"

특히 useEffect의 마법은 두 번째 인자로 들어가는 '의존성 배열(Dependency Array)'에서 나옵니다. 이 배열은 집사에게 내리는 '감시 조건'과 같습니다.

useEffect(() => { 실행할 작업 }, [])
배열이 비어있으면? "이 작업은 처음 입주할 때 딱 한 번만 실행해!" (예: 초기 매물 데이터 로딩)

useEffect(() => { 실행할 작업 }, [계약상태])
배열에 값이 있으면? "다른 건 신경 쓰지 말고, 오직 '계약상태'가 변할 때만 이 작업을 다시 실행해!"

나만의 맞춤형 스마트홈 패키지: 커스텀 훅(Custom Hooks)

리액트 훅(React Hooks)이 제공하는 진정한 힘은 바로 '재사용성'에 있습니다. 기본적으로 제공되는 useState나 useEffect를 조합하여, 나만의 강력한 '커스텀 훅(Custom Hooks)'을 만들 수 있습니다.

예를 들어, 여러 페이지에서 부동산 실거래가 API를 불러와야 한다고 가정해 봅시다. 예전 같으면 거실, 안방, 주방마다 일일이 통신 배선을 깔고 오류 처리를 하는 코드를 중복해서 작성해야 했습니다.

하지만 커스텀 훅을 사용하면 useFetchRealEstateData라는 '맞춤형 실거래가 조회 패키지 모듈'을 하나 만들어 둘 수 있습니다. 그리고 실거래가 데이터가 필요한 어떤 컴포넌트(방)에서든 이 모듈을 콘센트에 꽂듯 한 줄의 코드로 불러와 사용할 수 있습니다. 코드는 놀랍도록 깔끔해지고, 유지보수는 중앙 모듈 하나만 수정하면 되니 극도로 효율적입니다.

안전한 건축을 위한 필수 법규: 훅(Hooks)의 2가지 규칙

이처럼 강력한 리액트 훅도, 건물이 무너지지 않게 하려면 반드시 지켜야 할 '건축법'이 있습니다. 이 두 가지 규칙을 어기면 리액트라는 건축 시스템은 심각한 에러를 뿜어냅니다.

최상위(Top Level)에서만 훅을 호출해야 합니다.
훅은 반복문, 조건문(if), 중첩된 함수 안에서 실행하면 안 됩니다. 리액트는 훅이 호출되는 '순서'를 기억하여 상태를 관리합니다. 만약 조건문에 따라 어떤 날은 훅이 실행되고 어떤 날은 실행되지 않으면, 리액트는 내부 배선 순서를 헷갈려 시스템이 붕괴됩니다. 스마트홈 메인 스위치는 숨겨진 벽장 속이 아니라, 누구나 항상 접근할 수 있는 거실 메인 벽면에 순서대로 설치해야 하는 것과 같습니다.
오직 리액트 함수 내에서만 훅을 호출해야 합니다.
일반적인 자바스크립트 함수에서는 훅을 사용할 수 없습니다. 훅은 함수형 컴포넌트나, 또 다른 커스텀 훅 내부에서만 작동하도록 설계된 특수 부품입니다. 일반 콘크리트 벽에는 스마트홈 모듈을 꽂을 수 없는 것과 같은 이치입니다.

마무리하며: 함수형 컴포넌트로 완성된 현대 웹 건축

오늘은 무겁고 복잡했던 과거의 개발 방식을 벗어나, 함수형 컴포넌트와 리액트 훅(React Hooks)을 통해 얼마나 직관적이고 효율적으로 웹 애플리케이션을 지을 수 있는지 알아보았습니다.

useState로 실내 환경(상태)을 손쉽게 조절하고, useEffect로 건물의 생애주기를 완벽하게 자동화하는 방법. 이 두 가지만 확실히 이해하셔도, 여러분은 이미 현대 프론트엔드 개발의 가장 중요한 뼈대를 세우신 것입니다.

그런데 여기서 한 가지 새로운 고민이 생깁니다. 만약 우리 집 거실의 온도 조절기(State)를, 옆 동에 있는 관리사무소나 옥상의 공용 시스템과 공유해야 한다면 어떻게 될까요? 컴포넌트가 수십, 수백 개로 늘어나면 데이터를 부모에서 자식으로 계속 전달(Props Drilling)하는 것이 매우 비효율적입니다.

그래서 다음 12편에서는 아파트 단지 전체의 데이터를 중앙에서 한 번에 관리하는 혁신적인 시스템, '전역 상태 관리(Context API와 Redux)'에 대해 본격적으로 파헤쳐 보겠습니다. 다음 편도 절대 놓치지 마시고 꼭 즐겨찾기 해두시길 바랍니다!