React 학습 정리 노트

📅 정리일: 2026-04-29
📚 범위: Props & State 연동 / Component LifeCycle / Routing / 성능 최적화 (useMemo, useCallback, React.memo)

---

Ch03. Props & State 연동

핵심 원칙

• 부모 state → 자식 UI 변경: 부모의 state를 props로 자식에게 전달
• 자식이 값을 변경하고 싶을 때: 자식은 props를 직접 변경할 수 없다
  • 부모가 상태 변경 함수(setState)를 props로 함께 전달
  • 자식이 그 함수를 호출 → 부모 state 변경 → 부모가 새 props를 자식에게 다시 내려줌

데이터 흐름 요약

부모 (state 보유)
  ↓ props로 state 전달
자식 (UI 렌더링)
  ↓ 변경이 필요하면 부모가 준 setState 함수 호출
부모 (state 업데이트)
  ↓ 새 props 다시 전달
자식 (리렌더링)

---

Ch04. Component LifeCycle

컴포넌트의 세 가지 상태

상태	설명	발생 시점
마운트	컴포넌트 DOM이 최초 생성	페이지에 컴포넌트가 추가될 때
업데이트	DOM이 수정되는 상태	state/props 변경, 부모 컴포넌트 리렌더링 시
언마운트	DOM이 제거되는 상태	페이지에서 컴포넌트가 제거될 때

💡 추가 정리: React에서 라이프사이클을 다루는 훅은 useEffect다.

• useEffect(() => {}, []) → 마운트 시 1회 실행
• useEffect(() => {}, [state]) → state 변경 시마다 실행 (업데이트)
• useEffect(() => { return () => {} }, []) → return 안의 함수가 언마운트 시 실행

---

Ch05. Routing

페이지 이동 방법

방법	사용 위치	코드
<Link> 컴포넌트	JSX 내 이동	<Link href="/page">이동</Link>
useRouter()	클라이언트 컴포넌트	const router = useRouter(); router.push('/page')
redirect()	클라이언트 & 서버 컴포넌트 모두 가능	redirect('/page')

⚠️ 주의: 페이지 컴포넌트는 반드시 폴더 형태로 만들어야 한다. 싱글 파일 불가.

---

Ch05. 성능 최적화

문제 인식: 왜 성능 최적화가 필요한가?

React는 state가 변경되면 컴포넌트를 리렌더링한다.
리렌더링될 때마다 컴포넌트 함수 내부의 모든 코드가 다시 실행되고, 함수도 새로 선언된다.

• 함수가 재선언되면 → 이전 함수 객체는 버려지고 새 객체가 생김 → 참조(메모리 주소)가 달라진다
• 함수를 props로 자식에게 넘길 경우 → 참조가 바뀌면 자식도 리렌더링된다 (불필요한 렌더링 발생)

---

useMemo — 계산 결과값을 기억

언제 쓰나?

• 렌더링마다 무거운 계산을 반복하는 게 낭비일 때
• 특정 상태가 변경될 때만 재계산하고, 나머지 경우엔 이전 값을 재사용하고 싶을 때

문법

const 결과값 = useMemo(() => {
  // 계산 로직
  return 계산된값;
}, [의존성_상태]);

• 의존성 배열의 상태가 변경될 때만 재계산
• 다른 상태가 변경되어 리렌더링이 일어나도 이전에 메모한 값을 그대로 사용

실습 예시 비교

// ❌ 리렌더링될 때마다 함수 재호출
const getLength1 = function () {
  return boards.length;
};

// ✅ boards가 바뀔 때만 재계산
const getLength2 = useMemo(() => {
  return boards.length;
}, [boards]);

⚠️ useMemo는 값을 반환한다. 호출할 때 getLength2()가 아니라 {getLength2}로 사용.

---

useCallback — 함수 자체를 기억

언제 쓰나?

• 함수를 자식 컴포넌트에 props로 전달할 때
• 리렌더링마다 함수가 새로 선언되면 자식도 불필요하게 리렌더링되는 걸 막고 싶을 때

문법

const 함수 = useCallback(function () {
  // 함수 로직
}, [의존성_상태]);

• 의존성 배열의 상태가 변경될 때만 함수를 새로 선언
• 배열이 []이면 마운트 시 딱 1번만 선언

useMemo vs useCallback 차이

	useMemo	useCallback
기억하는 것	계산 결과값	함수 자체
반환	값	함수
사용 시	{getLength2}	{getLength1()} (함수이므로 호출 가능)
주요 용도	무거운 계산 캐싱	자식에게 넘길 함수 안정화

실습 예시

// ✅ boards가 바뀔 때만 함수 재정의
const getLength1 = useCallback(function () {
  return boards.length;
}, [boards]);

// ✅ 마운트 시 1번만 정의 (setBtitle이 안정적이라 deps 불필요)
const handleBtitleChange = useCallback(function (event) {
  setBtitle(event.target.value);
}, []);

// ✅ 상태 업데이터 함수 형태로 쓰면 boards를 deps에 안 넣어도 됨
const removeBoard = useCallback((bno) => {
  setBoards(prev => prev.filter(board => board.bno !== bno));
}, []);

const changeBoard = useCallback((bno) => {
  setBoards(prev => prev.map(board =>
    board.bno === bno
      ? { ...board, btitle: board.btitle + " (변경)" }
      : board
  ));
}, []);

💡 상태 업데이터 함수 패턴 setBoards(prev => ...) 을 쓰면, boards를 deps에 넣지 않아도 항상 최신 값을 참조할 수 있어서 []로 두는 게 가능하다.

---

React.memo — 컴포넌트 자체를 메모이제이션

언제 쓰나?

• 자식 컴포넌트에 적용
• 부모가 리렌더링돼도, 자신이 받은 props가 바뀌지 않으면 리렌더링 건너뜀

사용법

// 컴포넌트 정의 후 React.memo로 감싸서 export
export default React.memo(BoardListItem);

useCallback과 세트로 써야 효과가 있는 이유

• React.memo는 props를 얕은 비교(===) 로 확인
• 부모가 리렌더링되면 함수가 새로 선언 → 참조가 달라짐 → props가 바뀐 것으로 판단 → 자식 리렌더링 발생
• useCallback으로 함수 참조를 유지해야 React.memo가 제대로 동작함

// 부모에서 useCallback으로 함수 안정화
const removeBoard = useCallback((bno) => { ... }, []);

// 자식에서 React.memo로 감싸기
export default React.memo(BoardListItem);
// → 이제 board props가 안 바뀌면 자식은 리렌더링 안 됨 ✅

세 가지 훅의 조합 요약

useMemo     → 계산 결과를 기억해서 불필요한 재계산 방지
useCallback → 함수를 기억해서 불필요한 재선언 방지
React.memo  → 컴포넌트를 기억해서 불필요한 리렌더링 방지

---

💡 "상태를 썼다 / 안 썼다" 구분하는 법

교수님 질문 대비: 이 함수가 상태를 쓴 건지 안 쓴 건지 어떻게 판단하나?

핵심 기준

useState로 만든 변수(boards, bno, btitle 등)가 함수 몸통 안에 직접 보이면 → 상태를 쓴 것

const [boards, setBoards] = useState([...]);  // ← 상태
const [bno, setBno]       = useState(6);      // ← 상태
const [btitle, setBtitle] = useState("");     // ← 상태

이 이름들이 함수 안에 보이면 → 상태 씀, 안 보이면 → 상태 안 씀

---

실습 코드로 하나씩 확인

// ✅ 상태 안 씀 → deps []
const handleBtitleChange = useCallback(function (event) {
    setBtitle(event.target.value);
    // setBtitle은 setter — 상태를 "바꾸는" 것이지 "읽는" 게 아님
}, []);

// ✅ 상태 안 씀 → deps []
const removeBoard = useCallback((bno) => {
    setBoards(prev => prev.filter(board => board.bno !== bno));
    // boards라는 이름이 안 보임. prev로 받아오고 있음
}, []);

// ❌ 상태 씀 → useCallback 효과 없음, 그냥 일반 함수로 둬야 함
const addBoard = function() {
    const newBoard = { bno, btitle };    // bno, btitle 직접 읽음
    setBoards([...boards, newBoard]);    // boards 직접 읽음
    setBno(bno + 1);                     // bno 직접 읽음
}
// → deps에 [bno, btitle, boards] 다 넣어야 해서
//   결국 매번 새로 만들어짐 → useCallback 의미 없음
//   그래서 교수님이 "이건 그냥 놔두는 게 좋다"고 하신 것

// ❌ 상태 씀 → deps에 [boards] 필요
const getLength1 = useCallback(function () {
    return boards.length;   // boards 직접 읽음
}, [boards]);

---

헷갈리는 케이스 — prev 패턴

// ❌ 상태 씀 — boards 이름이 직접 보임
setBoards(boards.filter(...));

// ✅ 상태 안 씀 — prev로 받아오니까 boards 이름 없음
setBoards(prev => prev.filter(...));

prev는 React가 알아서 최신 상태값을 넣어주는 매개변수다. 내가 상태를 직접 읽은 게 아님.

---

판단 공식

함수 몸통 안에 상태 변수 이름(boards, bno, btitle...)이 보이면?

  YES → 상태 씀 → deps에 그 상태 넣기
  NO  → 상태 안 씀 → deps []

⚠️ setter는 예외: setBoards, setBno 같은 setter 함수는 읽는 게 아니라 바꾸는 것.
React가 항상 안정적으로 보장하므로 deps에 넣지 않아도 됨.

---

💡 useCallback + React.memo 깊이 이해하기

수업 중 헷갈렸던 부분을 흐름 순서대로 다시 정리한 내용

1단계 — 문제 상황: 왜 함수 주소가 문제가 되는가?

React는 state가 바뀌면 컴포넌트 함수를 통째로 다시 실행한다.

function BoardList() {
    const [btitle, setBtitle] = useState("");  // 이게 바뀌면

    // ↓ 이 함수도 새로 만들어짐
    const removeBoard = function(bno) { ... };

    // ↓ 이 함수도 새로 만들어짐
    const changeBoard = function(bno) { ... };
}

btitle(제목 입력창)에 글자 하나 칠 때마다 removeBoard, changeBoard가 새로 만들어진다.

---

2단계 — 자바스크립트에서 함수는 "물건(객체)"이다

함수를 변수에 담으면, 그 변수엔 함수의 주소(참조) 가 들어간다.

const fn1 = function() { return 1; };
const fn2 = function() { return 1; };

console.log(fn1 === fn2);  // ❌ false ← 내용이 같아도 다른 물건!

내용이 완전히 똑같아도, 새로 만들어진 함수는 다른 주소를 가진다.
리렌더링마다 함수가 새로 만들어진다 = 매번 주소가 달라진다.

---

3단계 — 자식한테 무슨 일이 생기나?

{boards.map((board) => (
    <BoardListItem
        board={board}
        removeBoard={removeBoard}   // ← btitle 바뀔 때마다 새 함수 전달
        changeBoard={changeBoard}   // ← btitle 바뀔 때마다 새 함수 전달
    />
))}

글자 하나 입력할 때마다 일어나는 일:

1. BoardList 리렌더링
2. removeBoard 새로 만들어짐 (주소 바뀜)
3. changeBoard 새로 만들어짐 (주소 바뀜)
4. BoardListItem이 새 props를 받음
5. props가 바뀌었으니까 → BoardListItem 전부 리렌더링 😱

게시물이 100개면 글자 하나 칠 때마다 100번 리렌더링이 일어난다.

---

4단계 — useCallback으로 함수 주소 고정하기

const removeBoard = useCallback((bno) => {
    setBoards(prev => prev.filter(board => board.bno !== bno));
}, []);  // ← 빈 배열 = 마운트 때 딱 한 번만 만들고 그 주소 유지

useCallback은 리액트한테 이렇게 말하는 것:

"이 함수, 리렌더링돼도 버리지 말고 처음 만든 거 계속 써."

그러면 removeBoard의 주소가 변하지 않는다.

1. BoardList 리렌더링
2. removeBoard → useCallback이 이전 함수 그대로 반환 (주소 동일)
3. BoardListItem이 받는 props → 이전이랑 같음
4. 리렌더링 안 해도 됨! 🎉

의존성 배열 [] — 언제 뭘 넣냐?

// 빈 배열 → 마운트 시 딱 1번만 함수 생성
const removeBoard = useCallback((bno) => { ... }, []);

// [boards] → boards가 바뀔 때만 함수 새로 생성
const getLength = useCallback(() => {
    return boards.length;  // boards를 직접 읽으니까 deps에 넣어야 함
}, [boards]);

setBoards(prev => ...) 패턴을 쓰면 boards를 직접 읽지 않으므로 []로 둬도 된다.

// ❌ boards를 직접 참조 → deps에 boards 필요
const removeBoard = useCallback((bno) => {
    setBoards(boards.filter(b => b.bno !== bno));  // boards 직접 읽음
}, [boards]);

// ✅ prev로 받아오면 → deps 빈 배열 가능
const removeBoard = useCallback((bno) => {
    setBoards(prev => prev.filter(b => b.bno !== bno));  // boards 안 읽음
}, []);

---

5단계 — React.memo로 리렌더링 자체를 막기

export default React.memo(BoardListItem);

React.memo는 자식 컴포넌트를 감싸서 이렇게 말하는 것:

"나한테 오는 props가 이전이랑 같으면, 리렌더링 안 해도 돼."

props를 비교하는 방식이 === 얕은 비교다.

이전 props: { board: {...}, removeBoard: 함수A, changeBoard: 함수B }
새 props:   { board: {...}, removeBoard: 함수A, changeBoard: 함수B }

함수A === 함수A ? → true (같은 주소)
→ props 안 바뀜 → 리렌더링 건너뜀 ✅

---

6단계 — useCallback 없이 React.memo만 쓰면 왜 안 되나?

// useCallback 없이
const removeBoard = function(bno) { ... };  // 매 렌더링마다 새 주소

// React.memo가 비교할 때
이전 props: { removeBoard: 함수A }
새 props:   { removeBoard: 함수B }  // 내용 같아도 주소가 다름!

함수A === 함수B ? → false
→ props 바뀐 것으로 판단 → 리렌더링 발생 💥

React.memo는 "비교하는 문지기"고, useCallback은 "주소를 유지시켜주는 것"이다.
문지기 혼자선 아무 의미 없다. 둘은 세트로 써야 한다.

---

전체 흐름 한 번에 보기

📝 제목 입력창에 글자 입력
        ↓
🔄 BoardList 리렌더링
        ↓
  useMemo    → boards 안 바뀌었으니 → 이전 계산값 그대로 ✅
  useCallback → removeBoard 함수 주소 그대로 ✅
  useCallback → changeBoard 함수 주소 그대로 ✅
        ↓
  BoardListItem에 전달되는 props → 이전이랑 같음
        ↓
  React.memo → props 안 바뀌었으니 → 리렌더링 건너뜀 ✅

최종 한 줄 요약

훅	무엇을 기억?	목적
useMemo	계산 결과값	무거운 계산 반복 방지
useCallback	함수의 주소	자식한테 넘길 함수 주소 유지
React.memo	컴포넌트 렌더 결과	props 안 바뀌면 리렌더링 건너뜀

---

🐛 오늘 발생한 에러 정리

Error 1: Element type is invalid

Uncaught Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object.
Check the render method of `BoardList`.

원인

임포트한 컴포넌트가 undefined 또는 object로 들어온 경우.

주요 원인 패턴

// ❌ export default인데 named import로 가져온 경우
import { BoardListItem } from './BoardListItem';  // undefined가 됨

// ✅ 올바른 import
import BoardListItem from './BoardListItem';

// ❌ 라이브러리를 통째로 import한 경우
import ReactDOM from 'react-dom';   // object → 컴포넌트로 사용 불가

// ✅ 올바른 import
import { createRoot } from 'react-dom';

디버깅 방법

// return 직전에 console.log로 임포트된 값 확인
console.log({ BoardListItem });
// {} 또는 undefined로 찍히는 게 범인

---

Error 2: Cannot read properties of undefined (reading 'length')

원인

useCallback 안에서 setBoards에 return을 빠뜨려서 undefined가 전달됨.

// ❌ return이 없어서 setBoards에 undefined 전달
const changeBoard = useCallback((bno) => {
  setBoards(aa => {
    aa.map(board => {          // map 결과를 return 안 함!
      if (board.bno === bno) {
        return { ...board, btitle: board.btitle + " (변경)" };
      } else {
        return board;
      }
    });                        // 여기서 return이 없음
  });
}, [boards]);

// ✅ 올바른 코드
const changeBoard = useCallback((bno) => {
  setBoards(aa => {
    return aa.map(board => {   // return 추가
      if (board.bno === bno) {
        return { ...board, btitle: board.btitle + " (변경)" };
      } else {
        return board;
      }
    });
  });
}, []);

핵심 포인트

중괄호 {} 사용 여부	return 필요 여부
화살표 함수 () => 값	return 불필요 (암묵적 반환)
화살표 함수 () => { ... }	return 명시 필수

💡 setBoards(prev => prev.map(...)) 처럼 중괄호 없이 쓰면 실수를 줄일 수 있다.

---

끝