React에서 useEffect를 쓸 때 가장 많이 부딪히는 부분 중 하나가 의존성 배열(dependency array) 설정입니다. 적게 넣으면 버그 나고, 많이 넣으면 무한루프... 😵

이 글에서는 useEffect와 의존성 배열을 언제, 어떻게 설정해야 하는지 완전 정리해봅니다.

useEffect란?

useEffect는 컴포넌트가 렌더링된 이후에 실행되는 side-effect 처리 함수입니다. React의 선언적 UI 렌더링 흐름과 별개로, 아래와 같은 "부수효과" 작업에 사용합니다.:

• API 요청
• DOM 조작
• 이벤트 등록
• 타이머 설정 등…

즉, 리액트의 순수 렌더링 외의 모든 부가 작업을 처리합니다.

useEffect(() => {
  // 여기가 side effect 영역
}, [deps]);

의존성 배열이란?

의존성 배열(dependency array)은 useEffect의 재실행 조건을 정의하는 역할을 합니다.

예시

useEffect(() => {
  console.log(count);
}, [count]);

→ count가 바뀔 때만 effect 실행

useEffect의 실행 순서

렌더링 → DOM 업데이트 → useEffect 실행

• 이 말은 곧, useEffect는 화면이 바뀐 뒤 실행된다는 뜻입니다.
• useEffect는 비동기적으로 실행되며, 렌더링을 막지 않습니다.

useLayoutEffect와의 차이점?

• useLayoutEffect: DOM 업데이트 이전에 실행됨 (동기)
• useEffect: DOM 업데이트 이후에 실행됨 (비동기)

클린업 함수란?

useEffect는 필요에 따라 정리(clean-up) 작업을 할 수 있습니다. 예를 들어 이벤트 리스너 제거, 타이머 정리 등:

useEffect(() => {
  const handler = () => console.log("scroll");
  window.addEventListener("scroll", handler);

  // 컴포넌트가 unmount 되거나, 의존성이 바뀔 때 실행됨
  return () => {
    window.removeEventListener("scroll", handler);
  };
}, []);

클린업 함수는 다음 시점에 실행됩니다:

• 컴포넌트가 언마운트될 때
• 의존성 배열이 바뀔 때 → 기존 effect 정리 후 새로운 effect 실행

⚠️ 의존성 배열, 왜 중요할까?

👍 올바르게 설정 시

• 불필요한 재실행 방지 → 성능 최적화
• 최신 데이터 값 사용 → 정확한 로직 보장

👎 잘못 설정 시

• 무한 루프 발생(setState → 렌더링 → effect → 다시 setState ...)
• stale data(오래된 값) 사용 → 예측 불가한 버그 발생

의존성 배열 설정 원칙

Effect 내부에서 사용하는 모든 외부 변수(state, props, 함수 등)는 반드시 의존성 배열에 포함해야한다.

useEffect(() => {
  console.log(user.name); // user 사용
}, [user]); // 반드시 user를 넣어야 함

ESLint가 도와주는 이유

• React 팀에서 만든 공식 ESLint 플러그인
• 코드의 문법 오류, 버그 가능성, 스타일 문제를 미리 찾아주는 도구
  • React 프로젝트에서는 보통 eslint-plugin-react-hooks라는 플러그인을 함께 사용
  • React 훅의 사용 규칙, 특히 useEffect, useCallback, useMemo 같은 훅의 의존성 배열을 자동으로 검사한다.

예시

useEffect(() => {
  console.log(count); // 사용 중
}, []); // ❌ ESLint 경고!

➡️ count를 사용했는데 의존성 배열에 없음 → stale data 위험!

해결

useEffect(() => {
  console.log(count);
}, [count]); // ✅ 최신 값 동기화 보장

ESLint 경고, 무시해도 될까?

가끔은 무시해도 됩니다. 정말 필요한 경우에만!

예: 마운트 시 단 1회만 실행

useEffect(() => {
  fetchData(); // 내부에서 state를 사용하지 않는다면 괜찮음
}, []);

함수와 객체는 왜 주의해야 할까?

1. 함수

• 자바스크립트에서 함수와 객체는 참조값이 중요 !

    const obj = { name: "Alice" };
    const another = { name: "Alice" };
    console.log(obj === another); // false

  ➡️ 내용이 같아도, 객체나 함수는 새로 만들면 다른 것으로 간주된다. ➡️ 즉, 매번 새로 생성되면 이전 값과 비교해서 '변했다'고 판단!

예시 코드

function App() {
  const fetchData = () => {
    console.log("데이터 요청");
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]);
}

➡️ 위 코드는 매 렌더링마다 fetchData 함수가 새로 만들어지기 때문에 useEffect도 매번 실행됩니다. ⛔

해결 방법: useCallback

• useCallback : 함수의 참조값을 고정해주는 훅이다.

  const fetchData = useCallback(() => {
    console.log("데이터 요청");
  }, []);

  ➡️ 이제 fetchData는 참조값이 고정되므로, useEffect도 안정적으로 동작합니다.

2. 객체

• 객체 또한 렌더링마다 새로 생성된다.

  useEffect(() => {
    console.log("옵션 변경됨");
  }, [{ size: 10 }]); // 매번 다른 객체로 인식됨!

해결 방법: useMemo

• useMemo는 객체를 처음 한 번만 생성하고, 의존성 배열이 변하지 않는 한 재사용합니다.

  const options = useMemo(() => ({ size: 10 }), []);
  
  useEffect(() => {
    console.log("옵션 변경됨");
  }, [options]);

  ➡️ 객체 참조를 고정해서 useEffect가 불필요하게 실행되지 않도록 합니다.

요약 정리

마무리

useEffect는 단순해 보이지만, 의존성 배열을 잘못 쓰면 예측 불가능한 버그로 이어질 수 있습니다. 다음 원칙만 기억하기:

• useEffect 안에서 쓰는 모든 변수는 의존성 배열에 넣기
• 함수나 객체는 useCallback / useMemo로 감싸기
• 불필요한 ESLint 무시는 금물

리액트로 개발할 때 우리는 매일 JSX를 사용합니다. 하지만 처음 접하면 HTML과 너무 비슷해 보이기 때문에 "이거 그냥 HTML 아냐?"라고 착각하기 쉽습니다.(😂) JSX 문법이 HTML과 매우 유사하게 보이지만, 실제로는 중요한 차이점(작동 방식부터 문법 규칙까지)들이 있습니다.

JSX란 무엇인가?

JSX(JavaScript XML)는 React에서 UI를 구성하기 위해 사용하는 JavaScript의 확장 문법입니다. 외관상 HTML과 유사하지만, 실제로는 JavaScript 객체로 변환되어 React 엘리먼트를 생성합니다.

• 쉽게 말하면, 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있는 문법입니다.

  const element = (
    <div className="container">
      <h1>안녕하세요!</h1>
    </div>
  );

• 이 코드는 겉으로 보기엔 HTML 같지만 브라우저에서 직접 실행되지 않고, Babel과 같은 트랜스파일러를 통해 다음과 같은 JavaScript 코드로 변환됩니다:

    const element = React.createElement(
      'div',
      { className: 'container' },
      React.createElement('h1', null, '안녕하세요!')
    );

→ 즉, JSX는 브라우저가 바로 이해할 수 없고, 컴파일 과정(Babel 등)을 거쳐 자바스크립트 코드로 변환된다는 것이 가장 큰 포인트입니다.

JSX와 HTML의 주요 차이점

1. 속성(Attributes) 명명 규칙

HTML:

• 속성 이름은 대소문자를 구분하지 않습니다.

• 케밥 케이스(kebab-case)를 사용합니다.

  케밥 케이스(kebab-case)란?

  • 케밥 케이스는 프로그래밍과 웹 개발에서 사용되는 명명 규칙(naming convention) 중 하나입니다.

  • 이름이 재미있게도 "케밥"에서 유래했는데, 단어들이 하이픈(-) 기호로 연결되어 마치 케밥 꼬치처럼 보이기 때문입니다.

    케밥 케이스의 특징:

    1. 단어 사이에 하이픈(-) 사용: 모든 단어가 소문자로 작성되고, 단어 사이는 하이픈으로 구분합니다.

    2. 예시: background-color, margin-top, user-select, font-family

• class, for 같은 키워드를 그대로 사용합니다.

  <div class="container" tabindex="-1" data-value="example"></div>

JSX:

• 속성 이름은 카멜 케이스(camelCase)를 사용합니다.

  카멜 케이스(camelCase)란?

  • 카멜 케이스는 프로그래밍에서 흔히 사용되는 명명 규칙(naming convention) 중 하나입니다.

  • 이름이 "낙타(camel)"에서 유래했는데, 단어들이 대소문자로 구분되어 낙타의 등처럼 올라갔다 내려갔다 하는 모양을 연상시키기 때문입니다.

    카멜 케이스의 특징:

    1. 첫 단어는 소문자로 시작: 첫 번째 단어는 모두 소문자로 작성합니다.

    2. 이후 단어는 대문자로 시작: 두 번째 단어부터는 첫 글자만 대문자로 작성합니다.

    3. 단어 사이에 공백이나 특수문자 없음: 모든 단어가 붙어있고 대소문자로만 구분됩니다.

    4. 예시: backgroundColor, userName, isLoggedIn, handleSubmit

    → JavaScript와 React에서는 카멜 케이스가 변수, 함수, 메서드, 그리고 JSX 속성에 대한 표준 명명 규칙으로 사용됩니다

• HTML 속성과 다른 이름을 사용하는 경우가 있습니다(예: class → className).

  • 이유는 간단합니다. class와 for는 자바스크립트에서 이미 특별한 의미를 가지는 키워드이기 때문에, 이름을 살짝 바꿔야 합니다.

      <div className="container" tabIndex="-1" data-value="example"></div>

2. JavaScript 표현식 사용

HTML:

• JavaScript 코드를 직접 삽입할 수 없습니다.

• HTML에서는 텍스트만 적으면 텍스트로 보입니다.

    <p>2 + 2</p>  <!-- 브라우저에는 "2 + 2"로 표시 -→

JSX:

• 중괄호 {}를 사용하여 JavaScript 표현식을 직접 삽입할 수 있습니다.

    const name = "React";
    const element = <h1>Hello, {name}!</h1>;

    // 조건부 렌더링
    const showElement = true;
    const conditionalElement = (
      <div>
        {showElement && <p>이 요소는 조건에 따라 렌더링됩니다.</p>}
      </div>
    );

    <p>{2 + 2}</p>  // 결과: 4

3. 스타일 적용 방식

HTML:

• 인라인 스타일은 문자열로 정의합니다.

    <div style="color: blue; margin-top: 20px;"></div>

JSX:

• 인라인 스타일은 JavaScript 객체로 정의합니다.

    const divStyle = {
      color: 'blue',
      marginTop: '20px' // 카멜 케이스 사용
    };
  
    const element = <div style={divStyle}></div>;
    // 또는
    const element = <div style={{ color: 'blue', marginTop: '20px' }}></div>;

4. 태그 닫기(Self-closing tags)

HTML:

• HTML에서는 <img>, <input> 태그처럼 일부 태그는 닫을 필요가 없습니다.

    <input type="text">
    <br>
    <img src="image.jpg">

JSX:

• 모든 태그는 반드시 닫아야 합니다. 안 닫으면 컴파일 에러가 발생합니다.

    <input type="text" />
    <br />
    <img src="image.jpg" />

5. 주석 작성 방식

HTML:

<!-- 이것은 HTML 주석입니다 -->

JSX:

{/* 이것은 JSX 내부의 주석입니다 */}

6. 예약어와 충돌

HTML:

• 예약어 사용에 제한이 없습니다.

JSX:

• JavaScript 예약어와 충돌을 피하기 위해 일부 속성명이 변경되었습니다.

  • class → className

  • for → htmlFor

      <label className="form-label" htmlFor="username">사용자 이름:</label>

7. 데이터 바인딩

HTML:

• 동적 데이터 바인딩을 위해서는 별도의 JavaScript 코드가 필요합니다.

JSX:

• 직접적인 JavaScript 표현식을 통한 데이터 바인딩이 가능합니다.

    const items = ['사과', '바나나', '오렌지'];
  
    const element = (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );

JSX를 사용하는 이유

1. 가독성 향상: HTML과 유사한 문법으로 UI 구조를 더 명확하게 표현할 수 있습니다.
2. JavaScript의 모든 기능 활용: 조건부 렌더링, 반복 렌더링 등 JavaScript의 강력한 기능을 UI 구성에 활용할 수 있습니다.
3. 컴포넌트 기반 개발: 재사용 가능한 컴포넌트를 쉽게 만들고 조합할 수 있습니다.
4. Type 안전성: TypeScript와 함께 사용하면 컴파일 시점에 오류를 감지할 수 있습니다.

정리: JSX vs HTML

결론

• JSX는 HTML과 외형적으로 유사하지만, 진짜 HTML은 아닙니다. 실제로는 JavaScript의 확장 문법으로 다양한 차이점이 있습니다.
• 리액트의 렌더링 로직 안에서 자바스크립트 객체를 만들기 위한 문법이라고 이해하는 게 정확합니다.
• 이러한 차이점을 이해하고 JSX의 특성과 장점을 활용하면 React에서 더 효율적으로 UI를 구성할 수 있습니다.

React에서 상태를 관리하는 방법에는 여러 가지가 있지만, useState와 useReducer는 가장 많이 사용되는 두 가지 훅입니다. 이 둘은 비슷하게 보일 수 있지만, 각각의 사용 목적과 특징이 다릅니다. 이번 포스트에서는 useState와 useReducer를 비교하며, 언제 각 훅을 사용하는 것이 적합한지에 대해 알아보겠습니다.

1. useState

useState는 React 컴포넌트 내에서 간단한 상태를 관리할 수 있는 훅입니다. 상태 값과 그 상태를 변경하는 함수를 반환하여, 상태를 직접 관리할 수 있게 해줍니다.

사용법

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

🔥 특징

• 단일 상태 값 관리: useState는 간단한 값 하나를 관리할 때 적합합니다.
• 상태값과 업데이트 함수: useState는 상태값과 이를 갱신하는 함수를 함께 반환합니다.
• 간단한 상태 업데이트: 상태 업데이트가 단순할 때 매우 직관적이고 사용하기 쉽습니다.

💡 언제 사용하나요?

• 상태가 하나일 때
• 상태 로직이 간단할 때

✅ 장점

• 간단함: 단순한 상태 관리에 매우 직관적이고 사용하기 쉽습니다.
• 직관적인 코드: 상태와 업데이트 함수가 한 번에 반환되므로 코드가 깔끔하고 직관적입니다.
• 빠른 설정: 설정이 매우 간단하고, 빠르게 구현할 수 있습니다.

❌ 단점

• 복잡한 상태 관리에는 한계: 상태가 많아지거나 복잡해지면 코드가 복잡해지고 관리하기 어려워질 수 있습니다.
• 상태 업데이트 로직의 제어 부족: 상태 업데이트가 간단할 때는 괜찮지만, 여러 조건에 따라 복잡한 로직을 관리하려면 불편할 수 있습니다.

2. useReducer

useReducer는 상태 업데이트가 복잡할 때 사용되는 훅입니다. 여러 가지 상태를 하나의 객체로 관리하거나, 상태 변화가 여러 가지 조건에 따라 달라져야 할 때 유용합니다. 리듀서 함수와 액션 객체를 사용하여 상태를 업데이트합니다.

사용법

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

🔥 특징

• 복잡한 상태 관리: 여러 값이 연관되어 있거나 복잡한 상태 로직이 필요할 때 유용합니다.
• 리듀서 함수 사용: 상태 업데이트 로직을 switch문으로 명확하게 정의할 수 있습니다.
• 디스패치 방식: 액션 객체를 디스패치하여 상태를 업데이트합니다.

💡 언제 사용하나요?

• 상태가 여러 개일 때
• 상태 변화가 복잡할 때
• 여러 액션에 따라 상태를 업데이트할 때

✅ 장점

• 복잡한 상태 로직 처리: 여러 상태 값들이 연관되어 있거나 복잡한 상태 로직을 관리할 때 유용합니다.
• 상태 업데이트 로직 명확화: reducer 함수 내에서 상태 업데이트 로직을 명확하게 분리할 수 있어 디버깅이 용이합니다.
• 확장성: 여러 액션을 다루는 데 용이하여, 코드가 커져도 관리하기 수월합니다.

❌ 단점

• 초기 설정 복잡: useState보다 설정이 복잡할 수 있으며, 작은 상태에 대해서는 과도할 수 있습니다.
• 학습 곡선: reducer와 dispatch 개념을 이해하는 데 시간이 필요할 수 있습니다.
• 불필요한 코드 중복: 상태 값이 매우 간단한 경우 useReducer는 오히려 코드가 복잡해지거나 불필요하게 느껴질 수 있습니다.

useState vs useReducer 비교

💡 언제 useState를 사용해야 할까요?

단일 값 상태를 관리할 때

• 버튼 클릭으로 카운트를 증가시키는 간단한 상태 관리에는 useState가 매우 직관적이고 간결합니다.

상태 업데이트가 복잡하지 않을 때

• 값 하나만 관리할 때 useState가 더 간단하고, 코드가 깔끔해집니다.

💡 언제 useReducer를 사용해야 할까요?

상태가 여러 개일 때:

• 상태 값이 여러 개일 때 하나의 객체로 묶어서 관리할 수 있어, 코드가 더 깔끔하고 효율적입니다.

상태 변화가 복잡하거나 조건에 따라 달라질 때:

• 여러 조건에 따라 상태가 변경되거나, 상태 업데이트 로직이 복잡할 때 useReducer가 적합합니다.

  여러 액션에 따른 상태 변화가 필요할 때:

• 여러 가지 액션을 다뤄야 할 때, useReducer는 코드가 더욱 명확하고 관리하기 쉬워집니다.

결론 🚀

useState와 useReducer는 각각의 특성에 맞게 사용해야 합니다.

• useState는 간단한 상태를 다룰 때 적합하고,
• useReducer는 상태가 복잡하거나 여러 액션에 따라 변화하는 상태를 관리할 때 유용합니다.

각각의 상황에 맞는 훅을 선택하여, 더 깔끔하고 효율적인 상태 관리가 가능하므로, 필요에 맞게 잘 활용해 보세요!

React 프로젝트를 만들 때 create-react-app(CRA)만 있는 게 아니라 Vite, Next.js, Parcel, Snowpack 같은 다양한 빌드 도구를 사용할 수 있습니다. 각각의 장점과 차이를 알아봅시다.

✅ Vite의 장점 설명

• 빠른 개발 서버
  기존 번들러(CRA)는 모든 파일을 한 번에 변환하고 서버를 시작하지만, Vite는 ES 모듈(ESM) 기반으로 동작해 필요한 파일만 즉시 변환해서 로드함. 덕분에 서버 실행 속도가 매우 빠름.

  📌 비유: CRA는 도서관에서 모든 책을 한 번에 복사해서 나눠주는 방식이라면, Vite는 요청할 때만 필요한 페이지를 바로 가져다주는 방식임.

• 빠른 빌드 속도
  Vite는 esbuild라는 초고속 번들러를 사용함. esbuild는 Go 언어로 만들어져 있어서, 기존 JavaScript 기반 번들러(Webpack)보다 10~100배 빠르게 코드 변환(트랜스파일링)이 가능함.

  📌 비유: Webpack이 수작업으로 종이 문서를 타이핑해서 만드는 방식이라면, esbuild는 스캐너로 즉시 디지털화하는 방식이라고 볼 수 있음.

• HMR(Hot Module Replacement) 성능 우수
  HMR은 코드 변경 시 전체 페이지를 새로고침하지 않고 수정된 부분만 즉시 반영하는 기능임. Webpack 기반의 CRA도 HMR을 지원하지만, Vite는 변경된 모듈만 바로 적용하므로 속도가 훨씬 빠름.

  📌 비유: CRA는 옷을 한 벌 다 갈아입어야 하지만, Vite는 부분적으로 필요한 부분만 교체하는 방식임.

• 플러그인 확장성
  Vite는 Rollup을 기반으로 하므로 이미 잘 만들어진 Rollup 플러그인 생태계를 그대로 활용할 수 있음. 덕분에 빌드 과정에서 최적화, 코드 변환, 다양한 기능 확장이 가능함.

  📌 비유: Vite는 이미 인기 있는 Rollup 마켓에서 다양한 확장팩을 가져다 쓸 수 있는 게임 같은 느낌.

❌ Vite의 단점 설명

• 지원 브라우저 제한
  Vite는 ES 모듈(ESM)을 지원하는 최신 브라우저에서만 동작함. Internet Explorer(IE)처럼 오래된 브라우저에서는 ESM을 지원하지 않기 때문에, Vite 프로젝트를 실행할 수 없음.

  📌 비유: 최신 앱이 오래된 핸드폰에서 실행되지 않는 것과 비슷한 개념.

• 생태계가 CRA보다 상대적으로 작음
  CRA는 오랫동안 React 공식 추천 방식이었기 때문에 많은 자료와 강의가 존재하지만, Vite는 비교적 최근에 인기를 끌면서 아직 CRA만큼 압도적인 생태계를 갖추진 못함. 하지만 현재 빠르게 성장 중이라 이 문제는 점점 해결되고 있음.

  📌 비유: CRA는 오래된 대형 마트, Vite는 요즘 뜨는 핫한 편집숍. 아직 매장 수는 적지만, 트렌디하고 성장 가능성이 큼.

React 프로젝트 빌드 도구 비교

결론

최근에는 Vite가 빠른 속도와 가벼운 설정 덕분에 가장 많이 사용되는 추세입니다.

하지만 SEO가 중요한 경우 Next.js, 전통적인 방식이 필요하면 CRA도 고려할 수 있습니다.

프로젝트의 규모나 요구사항에 맞춰 적절한 빌드 도구를 선택하면 됩니다! 🚀