본문 바로가기
클라우드(Cloud)

[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 8주차 - 리액트 2 (React 2)

Kangggg 2025. 5. 20. 16:49

 

 

 지난 글에 이어서 React에 대해 학습해볼 것이다. React에서 가장 핵심 개념 중 하나인 컴포넌트(Component)부터 자세히 다뤄볼 예정이다. 먼저 컴포넌트가 무엇이고, 어떤 종류가 있고, 종류들 끼리의 차이는 어떤 것인지 등에 대해 알아보자. 

 

✅ 1. 컴포넌트(Component)란?

🔹 정의

  • React 앱을 이루는 UI의 구성 단위(블록)
  • 컴포넌트는 HTML 요소처럼 재사용이 가능한 독립적인 단위
  • 입력(props)과 출력(JSX UI)을 기반으로 동작

쉽게 말해, "함수처럼 사용할 수 있는 화면 조각"이다. 

 

✅ 2. 컴포넌트의 종류

종류 설명
함수형 컴포넌트 ES6 함수 문법 기반, 현재 표준
클래스형 컴포넌트 클래스 기반, 이전 버전에서 사용됨
 

✅ 3. 함수형 컴포넌트 예시

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

🔍 설명

  • Welcome은 하나의 컴포넌트
  • props는 부모 컴포넌트로부터 받은 입력값
  • JSX를 return → 렌더링 결과가 <h1>안녕하세요, ~~님!</h1>처럼 나옴

 

✅ 4. 클래스형 컴포넌트 예시 

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

🔍 설명

  • 클래스 문법 사용 (extends Component)
  • render() 메서드 안에서 JSX를 반환해야 함
  • props는 this.props로 접근해야 함

❗ 코드가 더 길고 복잡해 → 현재는 함수형 컴포넌트 + Hook이 주류

 

→ 함수형 컴포넌트와 클래스형 컴포넌트를 비교해보았을 때, 함수형 컴포넌트가 더 간결하고 깔끔하게 UI를 표현할 수 있는 걸 볼 수 있다. 

 

✅ 5. 클래스형 vs 함수형 컴포넌트 비교

항목 클래스형 컴포넌트 함수형 컴포넌트
문법 class 문법 사용 function 또는 arrow function
props 접근 this.props props 매개변수로 직접
상태(state) 관리 this.state, this.setState() useState() 훅 사용
생명주기 관리 componentDidMount() 등 useEffect() 훅 사용
현재 트렌드 ❌ 요즘 잘 사용하지 않음 ✅ React 공식 추천 방식
 

✅ 6. 클래스형 vs 함수형 컴포넌트 예시 코드 

🔸 클래스형 컴포넌트 

import React, { Component } from 'react';

// 클래스형 컴포넌트 정의
class Hello extends Component {
  render() {
    return (
      // JSX 반환: 컴포넌트가 렌더링할 UI
      <div>
        <h1>Hello React!</h1>
        <p>클래스형 컴포넌트입니다.</p>
      </div>
    );
  }
}

export default Hello;

🔍 코드 설명

  • import React, { Component }
    → 클래스형 컴포넌트를 만들기 위해 Component를 가져옴
  • class Hello extends Component
    → Hello라는 이름의 컴포넌트를 선언하고, React의 Component를 상속
  • render() 메서드
    → JSX를 반환하는 필수 메서드. 이 내부의 내용이 실제로 렌더링됨
  • export default Hello
    → 이 컴포넌트를 외부 파일에서 사용할 수 있게 내보냄

🔸 함수형 컴포넌트

import React from 'react';

// 함수형 컴포넌트 정의
function Hello() {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>함수형 컴포넌트입니다.</p>
    </div>
  );
}

export default Hello;

🔍 코드 주석 설명

  • function Hello()
    → Hello라는 이름의 함수형 컴포넌트 선언
  • return 안의 JSX
    → 이 컴포넌트를 화면에 렌더링했을 때 보일 내용
  • export default Hello
    → 이 컴포넌트를 외부에서도 사용할 수 있도록 설정

✅ 요약 정리

항목 요약 내용
컴포넌트란 재사용 가능한 UI 조각
종류 함수형 ✅ / 클래스형 ❌
함수형 장점 간단, 깔끔, Hook 사용 가능
클래스형 특징 render(), this.props, 생명주기 메서드
실무 선택 함수형 컴포넌트 중심 + Hook 활용

 다음은 또 컴포넌트 생명주기에 대해 학습해보려 한다. 생명주기가 무엇인지, 생명주기의 메서드들과 마운트 단게 등을 학습해보자. 

 

✅ 1. 생명주기란?

컴포넌트가 태어나고(마운트), 업데이트되고, 사라질 때(언마운트)까지 거치는 일련의 과정

 

 React 컴포넌트는 생성된 후에도 변화할 수 있기 때문에, 각 단계마다 특정 동작을 자동으로 수행할 수 있게 생명주기 메서드를 제공한다. 

 

✅ 2. 생명주기 단계

React 생명주기는 크게 다음 4단계로 나뉜다. 

단계 설명
마운트(Mount) 컴포넌트가 DOM에 처음 나타날 때
업데이트(Update) props나 state가 바뀔 때 다시 렌더링되는 과정
언마운트(Unmount) 컴포넌트가 DOM에서 제거될 때
오류 처리(Error) 렌더링 중 오류 발생 시 처리하는 단계
 

✅ 3. 클래스형 컴포넌트 생명주기 메서드 목록

마운트(Mount) 단계

메서드 설명
constructor() 컴포넌트 생성 시 호출, state 초기화
static getDerivedStateFromProps() props → state 동기화 (거의 안 씀)
render() JSX를 반환
componentDidMount() DOM 렌더링 직후 호출됨 (초기 API 호출 등 수행) ✅
 

업데이트(Update) 단계

메서드 설명
static getDerivedStateFromProps() (동일하게 호출됨)
shouldComponentUpdate() 업데이트 여부 결정 (리렌더링 방지 가능)
render() 업데이트된 UI 출력
getSnapshotBeforeUpdate() DOM 업데이트 전 스냅샷 저장
componentDidUpdate() DOM 업데이트 완료 후 호출 ✅

 

언마운트(Unmount) 단계

메서드 설명
componentWillUnmount() 컴포넌트 제거 직전에 호출 ✅ (타이머 해제, 구독 해제 등)
 

오류 처리 단계

메서드 설명
static getDerivedStateFromError() 렌더링 중 오류 감지 시 실행
componentDidCatch() 오류 로깅 등 수행
 

✅ 4. 각 단계별 역할 요약

단계 타이밍 주요 목적
마운트 최초 렌더링 시 초기 데이터 로드, 외부 API 호출
업데이트 props/state 변경 시 DOM 수정 후 처리, 스크롤 등
언마운트 DOM에서 제거될 때 타이머 제거, 이벤트 리스너 제거
오류 처리 렌더링 중 오류 발생 오류 표시, 로깅 처리 등
 

✅ 5. 함수형 컴포넌트에서는 어떻게 처리할까? (useEffect)

함수형 컴포넌트는 클래스형의 생명주기 메서드를 쓰지 않고 useEffect() 훅을 사용해서 생명주기를 대체한다. 

🔹 마운트 시 실행

useEffect(() => {
  console.log("마운트됨!"); // API 요청 등
}, []); // 빈 배열 ⇒ 마운트 시 1회 실행

🔹 업데이트 시 실행

useEffect(() => {
  console.log("count가 변경됨!");
}, [count]); // count가 바뀔 때마다 실행됨

🔹 언마운트 시 실행

useEffect(() => {
  const timer = setInterval(() => console.log("1초마다 실행"), 1000);

  return () => {
    clearInterval(timer); // 언마운트 시 정리
    console.log("언마운트됨!");
  };
}, []);

✅ 요약 정리 

구분 내용
생명주기란 컴포넌트가 만들어지고, 업데이트되고, 제거되는 일련의 과정
클래스형 메서드 componentDidMount, componentDidUpdate, componentWillUnmount 등
함수형 방식 useEffect() 훅으로 대체
정리 포인트 마운트=초기 세팅 / 업데이트=변화 대응 / 언마운트=정리 작업
실무 예시 API 요청, 이벤트 등록, 타이머, 외부 라이브러리 처리 등

 다음은 위 생명주기 내용에도 포함되어 있었던 마운트(Mount)라는 개념에 대해 알아볼 것이다. 

 

✅ 1. 마운트의 정의

컴포넌트가 처음으로 DOM에 삽입되는 과정

 

쉽게 말해, "React가 해당 컴포넌트를 생성해서 처음으로 화면에 렌더링하는 순간"을 말한다. 

  • ReactDOM.render(<App />, root)처럼 컴포넌트를 DOM에 붙일 때 발생한다. 
  • 컴포넌트가 화면에 “출현”하는 시점이기 때문에, 초기 세팅, 데이터 불러오기, 외부 라이브러리 초기화 등을 하기에 가장 적절한 타이밍이다. 

 

✅ 2. 마운트는 언제 일어나나?

발생 시점 설명
컴포넌트가 처음 호출될 때 ex) <App />, <Header /> 등이 처음 렌더링될 때
조건부 렌더링에 의해 나타날 때 isVisible && <Modal /> 처럼 조건에 따라 등장할 때
 

✅ 3. 마운트 시 실행되는 작업들 (클래스형 기준)

메서드 설명
constructor() 컴포넌트 인스턴스 초기화 (state 초기 설정)
render() JSX를 실제 DOM으로 변환
componentDidMount() DOM에 붙인 후 실행됨  
class MyComponent extends React.Component {
  componentDidMount() {
    console.log("마운트됨!"); // 여기에 초기 API 호출 가능
  }

  render() {
    return <div>처음 화면에 나타났어요</div>;
  }
}

 

✅ 4. 함수형 컴포넌트에서의 마운트 처리

→ useEffect()의 두 번째 인자를 [] (빈 배열)로 주면 마운트 시 1회만 실행된다. 

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log("마운트 시 실행됨!"); // API 요청, 타이머 등록 등
  }, []);

  return <div>처음 렌더링된 컴포넌트</div>;
}

 

✅ 5. 마운트가 중요한 이유

  • 초기화의 타이밍을 보장해주는 단계
  • 잘못된 시점에 처리하면 오류나 미반영이 발생할 수 있기 때문에 마운트 이후에만 가능한 작업들이 많다. 

예: document.getElementById()로 DOM을 찾으려면 DOM이 먼저 생성되어야 하므로 → 마운트 이후에 가능

 

✅ 마무리 요약

항목 설명
마운트란? 컴포넌트가 처음으로 DOM에 붙는 과정
클래스형 처리 componentDidMount() 메서드 사용
함수형 처리 useEffect(() => { ... }, []) 사용
주 용도 초기 데이터 로딩, 외부 기능 초기화, 이벤트 등록 등
중요한 이유 이후 작업의 기준점이 되며, 시점이 보장됨

 다음으로는 실제로 React 기능을 사용할 수 있도록 해주는 특수한 함수인 Hook에 대해 학습해볼 것이다. 

 

✅ 1. Hook이란?

🔹 정의

함수형 컴포넌트에서 React 기능(상태, 생명주기 등)을 사용할 수 있게 해주는 특수한 함수

  • 원래는 클래스형 컴포넌트에서만 사용할 수 있었던 기능들 (예: state, 생명주기)
  • 하지만 Hook 도입 이후에는 함수형 컴포넌트에서도 동일한 기능 구현이 가능

 

✅ 2. Hook의 도입 배경

이유 설명
클래스형 문법이 복잡하고 번거로움 this.state, this.setState(), 생명주기 메서드 등
로직 재사용이 어려움 HOC, Render Props 등 우회 방식 사용
함수형 컴포넌트는 더 간결함 상태, 생명주기 모두 함수 내부에서 처리 가능
전역 상태 관리 등 확장성 강화 커스텀 훅으로 로직 공유 가능

Hook이 등장하면서 함수형 컴포넌트가 React의 표준이 되었다고 한다. 

 

✅ 3. 기본 Hook 종류

Hook 역할
useState() 컴포넌트에 상태값을 선언할 때 사용
useEffect() 생명주기 함수를 대체하는 Hook
useRef() DOM 참조, 인스턴스 변수 저장 등
useContext() Context API의 소비자 역할
useReducer() 복잡한 상태 로직 처리 (Redux처럼)
useCallback(), useMemo() 성능 최적화용 (컴포넌트 렌더링 방지 등)
 

✅ 4. useState - 상태 관리 Hook

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 초기값은 0

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

🔍 코드 설명 

  • useState(0) → count의 초기값을 0으로 설정
  • setCount() → 상태 변경 함수 (호출하면 컴포넌트가 자동 리렌더링됨)
  • 버튼 클릭 시 count + 1로 증가 → 화면이 자동으로 갱신

 

✅ 5. useEffect - 생명주기 대체 Hook

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1); // 1초마다 상태 증가
    }, 1000);

    return () => clearInterval(interval); // 언마운트 시 타이머 정리
  }, []); // 빈 배열 ⇒ 마운트 시 한 번만 실행
}

🔍 코드 설명 

  • useEffect()는 클래스형의 componentDidMount, componentDidUpdate, componentWillUnmount                               역할을 하나로 합친 Hook
  • [] 의존성 배열이 비어있으면 → 마운트 시 1회 실행
  • return 함수는 컴포넌트가 사라질 때 실행됨 → 언마운트 처리용

 

✅ 6. useEffect() 동작 방식 요약

의존성 배열 동작 설명
[] 컴포넌트 마운트 시 1회만 실행
[값] 해당 값이 변경될 때마다 실행
없음 매 렌더링마다 실행됨
return () => { ... } 언마운트 시 실행되는 정리(clean-up) 함수
 

✅ 7. 함수형 컴포넌트 + Hook 예시 

import React, { useState, useEffect } from 'react';

function App() {
  const [name, setName] = useState('~~');

  useEffect(() => {
    console.log(`${name} 컴포넌트가 마운트됨`);
    return () => console.log(`${name} 컴포넌트가 언마운트됨`);
  }, [name]);

  return (
    <div>
      <h1>안녕하세요, {name}님!</h1>
      <button onClick={() => setName('~~')}>이름 바꾸기</button>
    </div>
  );
}

🔍 코드 설명

  • useState('~~') → 초기 이름 설정
  • 버튼 클릭 → setName('~~') 실행 → 상태 변경 → 리렌더링 발생
  • useEffect()는 name이 바뀔 때마다 실행
    • 이전 컴포넌트는 clean-up 실행 (언마운트됨)
    • 이후 새 컴포넌트가 마운트됨 → 마운트됨 로그 출력

✅ 요약 정리 

항목 설명
Hook이란? 함수형 컴포넌트에서 React 기능을 사용할 수 있게 하는 도구
주요 Hook useState, useEffect, useRef, useContext, useReducer 등
useState() 컴포넌트 내부 상태를 선언하고 관리
useEffect() 생명주기 대체 → 마운트/업데이트/언마운트 처리 가능

 지금까지 React에 관한 내용들을 학습해보았다. 개념의 학습과 Toss 페이지 클론 코딩을 함께 진행하였는데 개념을 공부한다고 해서 React 코드가 잘 작성되는건 또 아닌 것 같긴 했지만 하나하나 이해하면서 내가 작성하는 코드에 대한 이해도도 높아지는 걸 느낄 수 있었던 것 같다. 실제 코드를 작성해보면서 느꼈던 것들은 추후 실습한 내용을 정리하는 글에서 다뤄볼 예정이다. 

 

본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.

'클라우드(Cloud)' 카테고리의 다른 글

[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 9주차 - 파이썬 기초 2 (Python Basic 2)  (0) 2025.05.21
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 9주차 - 파이썬 기초 1 (Python Basic 1)  (1) 2025.05.21
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 8주차 - 리액트 1 (React 1)  (0) 2025.05.20
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 7주차 - JavaScript Advanced 2 (자바스크립트 심화 2)  (1) 2025.05.14
[스나이퍼팩토리] 카카오클라우드 AIaaS 마스터 클래스 7주차 - JavaScript Advanced 1 (자바스크립트 심화 1)  (3) 2025.05.14

'클라우드(Cloud)' Related Articles

티스토리툴바