[처음 만난 리액트] React 책읽기 : Chapter 6-8 정리

[ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ]

 

🔹 React State 정리

✅ State란?

• 리액트 컴포넌트의 변경 가능한 데이터
• 개발자가 직접 정의하여 사용
• State가 변경되면 컴포넌트가 재렌더링됨
• 렌더링이나 데이터 흐름에 사용되는 값만 State에 포함해야 함

---

🎯 State의 특징

• JavaScript 객체 형태
• 직접 변경 불가능 → 반드시 지정된 방법(set 함수)으로 변경해야 함

---

⚛️ 클래스 컴포넌트에서 State 사용법

1. 생성자에서 State를 한 번에 정의
2. State 변경 시 setState() 함수 사용

---

⚡ 함수 컴포넌트에서 State 사용법

1. useState() Hook을 사용하여 각각의 State를 정의
2. 각 State별로 제공되는 set 함수를 사용하여 변경

---

🔹 React 생명주기(Lifecycle) 정리

React 컴포넌트는 생성(Mount) → 업데이트(Update) → 제거(Unmount) 의 과정을 거침.

---

✅ 1. 마운트(Mount) – 컴포넌트가 생성될 때

• 컴포넌트가 처음 화면에 나타날 때 실행
• 클래스 컴포넌트: componentDidMount()
• 주로 API 호출, 이벤트 리스너 등록, 초기 데이터 설정 등에 사용

🔄 2. 업데이트(Update) – 컴포넌트가 변경될 때

컴포넌트가 다시 렌더링되는 경우:

1. props가 변경될 때
2. setState()를 사용해 state가 변경될 때
3. forceUpdate()를 사용해 강제 업데이트할 때

• 클래스 컴포넌트: componentDidUpdate(prevProps, prevState)

🚀 3. 언마운트(Unmount) – 컴포넌트가 사라질 때

• 상위 컴포넌트에서 해당 컴포넌트를 더 이상 화면에 표시하지 않을 때 실행
• 클래스 컴포넌트: componentWillUnmount()
• 주로 이벤트 리스너 해제, 타이머 정리, 구독 취소 등에 사용

⚡ 함수 컴포넌트에서 생명주기 관리 (useEffect)

클래스 컴포넌트의 생명주기 메서드는 함수 컴포넌트에서 useEffect Hook으로 대체됨.

 

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("컴포넌트가 마운트됨");

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

  return <div>안녕하세요</div>;
}

 

✅ useEffect(() => {...}, []) → 마운트 시 실행
✅ return () => {...} → 언마운트 시 실행
✅ useEffect(() => {...}, [변수]) → 변수가 변경될 때 실행 (업데이트 반영)

---

🔹 React 훅(Hook) 정리

✅ 훅이란?

• 리액트의 state와 생명주기 기능을 사용할 수 있도록 도와주는 함수
• 클래스 컴포넌트 없이도 상태 관리 및 생명주기 제어 가능

---

🎯 1. useState() – 상태(state) 관리

• 함수 컴포넌트에서 state를 사용할 수 있도록 해주는 훅
• 상태를 변경할 때는 제공된 set 함수를 사용해야 함

🚀 2. useEffect() – 사이드 이펙트 처리

• 서버 데이터 요청, DOM 조작, 타이머 설정 등 부가적인 작업 수행
• 생명주기 함수(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체
• 의존성 배열을 활용하여 특정 값이 변경될 때만 실행 가능
• props와 state에 접근 가능
• useEffect()에서 반환하는 함수 → 컴포넌트 언마운트 시 실행됨 (정리 작업 가능)

🚀 3. useMemo() – 연산 최적화

• 값을 메모이제이션하여 불필요한 계산 방지
• 렌더링이 일어날 때마다 실행되므로 렌더링 중 실행하면 안 되는 작업을 넣지 않도록 주의
• 의존성 배열이 변경될 때만 새 값을 계산하고, 그렇지 않으면 기존 값을 반환

🔄 4. useCallback() – 함수 메모이제이션

• useMemo()와 비슷하지만 값이 아니라 "함수"를 메모이제이션
• 불필요한 함수 재정의를 막아 성능 최적화
• 함수 재정의를 막아 불필요한 렌더링 방지

📌 5. useRef() – DOM 요소 접근 & 렌더링 영향 없음

• 특정 컴포넌트 또는 DOM 요소에 대한 참조 객체 생성
• 렌더링이 일어나도 값이 유지됨
• 주로 DOM 요소 접근, 포커스 설정, 이전 값 저장 등에 활용

⚠️ 훅 사용 규칙

✅ 반드시 최상위 레벨에서 호출 (반복문, 조건문, 중첩 함수 내에서 호출 X)
✅ 리액트 함수 컴포넌트 또는 커스텀 훅 내부에서만 호출 가능

---

🔹 커스텀 훅(Custom Hook)

✅ 1. 커스텀 훅이란?

• use로 시작하는 자바스크립트 함수
• 내부에서 다른 훅들을 호출 가능
• 중복되는 로직을 추출하여 재사용성 증가

✅ 2. 규칙

• use로 시작하는 이름 사용 → 훅 규칙 위반 여부를 자동으로 확인 가능
• 다른 훅을 내부에서 호출 가능
• 파라미터와 반환값을 자유롭게 설정 가능

✅ 3. 커스텀 훅의 장점

• 로직 분리 및 재사용성 증가
• 가독성 향상 (컴포넌트 코드가 간결해짐)
• 상태 및 부수 효과 관리 용이

---

🔹 이벤트(Event) 정리

✅ 1. 이벤트란?

• 사용자가 버튼 클릭, 키보드 입력 등 특정 행동을 했을 때 발생하는 사건

✅ 2. 리액트에서의 이벤트 처리

구분	DOM 이벤트	리액트 이벤트
이벤트 이름	소문자 표기 (onclick)	카멜 표기법 (onClick)
이벤트 전달	문자열 전달 ("handleClick()")	함수 전달 ({handleClick})

✅ 3. 이벤트 핸들러(Event Handler)

• 이벤트 발생 시 실행되는 함수
• 이벤트 리스너(Event Listener) 라고도 함

✅ 4. 클래스 vs 함수 컴포넌트에서의 이벤트 처리

🔹 클래스 컴포넌트

• 함수 내부에서 this를 사용하므로, 생성자에서 바인딩해야 함

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("클릭됨!");
  }
  render() {
    return <button onClick={this.handleClick}>클릭</button>;
  }
}

 

🔹 함수 컴포넌트

• 화살표 함수를 사용하여 this 문제 해결

function MyComponent() {
  const handleClick = () => console.log("클릭됨!");
  
  return <button onClick={handleClick}>클릭</button>;
}

 

 

Argument?

• 함수에 전달할 데이터
• 파라미터 또는 매개변수라고 부르기도 함

• 클래스 컴포넌트
  • arrow function을 사용하거나 Function.prototype.bind를 사용해서 전달
• 함수 컴포넌트
  • 이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용