[React] React에서 화살표 함수 역할

 

1. 개요

리액트 프로젝트에서 useState내 첫 렌더링시에만 작용되도록 화살표함수를 사용했다.

이러한 구조를 익히며 리액트에서 사용되어지는 화살표 함수 역할을 정의해보고자 한다.

 

 

일단 JS에서 함수는 객체다.

React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다.

 

 

 

1️⃣ 리액트에서 화살표 함수(Arrow Function)의 핵심 역할

화살표 함수는 단순히 “짧은 함수 문법”이 아니다. React에서는 의미가 명확하게 다르다.

 

 

✔️  화살표 함수의 정의

화살표 함수는 “언제 실행할지”가 아니라
“어떻게 실행할지(지연·위임·안전한 계산)”를 표현하는 문법이다.

 

그리고 React가 그 함수를 ‘어떻게 쓰느냐’에 따라 의미가 달라진다.

 

 

 

1-1. useState에 화살표 함수 쓰는 경우 (Lazy Initialization)

 

코드예시 

function SectionRelatedWeekly({ company, period }) {
  const [localPeriod, setLocalPeriod] = useState(() => ({
    year: period.year,
    month: period.month,
    week: period.weeks ?? 0,
  }));
 }

 

위와 같은 코드를 React 는 아래와 같이 해석한다.

useState(initializerFunction)

 

“초기값을 바로 계산하지 말고 처음 렌더 때 딱 한 번만 이 함수를 실행해라”

 

 

• localPeriod 에 값이 저장됨
• 이후 리렌더에서는 절대 실행 안 됨

 

 

이건 React가 아래와 같이 약속했기 때문

useState에 함수가 오면
=> “이건 lazy initializer다. 첫 렌더 때 한 번만 실행 한다”

 

이건 “화살표 함수의 성질”이 아니라 useState의 특별한 규칙이다.

 

 

 

❌ 만약 아래와 같이 썼다면? 

useState({
  year: period.year,
  month: period.month,
  week: period.weeks ?? 0,
});

 

• 컴포넌트 매 렌더마다 객체 생성
• 초기값은 첫 렌더에만 쓰이지만
• 계산 비용 / 의도 측면에서 불리

 

 

그렇다면 리액트에서 화살표 함수는 무조건 한 번만 실행되는 것을 뜻할까?

 

✔️ 아니다. 리액트에서 화살표 함수는 무조건 한 번만 실행됨을 의미하지 않는다.

화살표 함수는 대부분 “매번 실행될 수 있다”

 

 

아래는 일반적인 화살표함수의 예시들이다.

 

예시 1: 일반 함수

const fn = () => {
  console.log('run');
};
fn();

 

호출할 때마다 실행됨 (한 번만 실행 같은 보장은 없음)

 

 

예시 2: useEffect

useEffect(() => {
  console.log('effect');
});

 

렌더될 때마다 실행 (처음 한 번 X)

 

 

예시 3: useMemo

useMemo(() => {
  console.log('memo');
  return value;
}, [dep]);

 

dep 바뀔 때마다 실행 (“한 번만” ❌)

 

 

예시 4: setState updater

setCount((prev) => prev + 1);

 

state 업데이트가 발생할 때마다 실행

 

 

 

✅ 그래서 useState(() => {}) 의 경우는 언제 사용해야 하는걸까?

• 초기값 계산이 비싸거나
• props를 기반으로 초기 1회만 만들고 싶을 때

 

 

 

1-2. setState 안에서 화살표 함수 (prev 패턴)

 

코드예시 

const [localPeriod, setLocalPeriod] = useState(() => ({
  year: period.year,
  month: period.month,
  week: period.weeks ?? 0,
}));
  
setLocalPeriod((prev) => {
  if (prev.year === next.year) return prev;
  return next;
});

 

이런 경우는 아래처럼 해석된다.

 

setState(updaterFunction)

 

React는 이렇게 처리:

“현재 state가 뭔지 모르겠으니 가장 최신 state(prev) 를 인자로 넘겨줄게”

 

 

 

왜 이게 중요할까?

 

❌ 위험한 코드예시

setCount(count + 1);
setCount(count + 1);

 

둘 다 같은 count를 참조 → 결과 1 증가

 

 

✅ 안전한 코드예시

setCount((prev) => prev + 1);
setCount((prev) => prev + 1);

 

prev는 항상 최신 → 결과 2 증가

 

 

 

useCallback 코드 해부하기 (줄 단위 설명)

  const handlePeriodChange = useCallback((next) => {
    setLocalPeriod((prev) => {
      // 값이 같으면 state 업데이트 안 함 (불필요 리렌더 방지)
      if (
        prev.year === next.year &&
        prev.month === next.month &&
        prev.week === next.week
      ) return prev;
      return next;
    });
  }, []);

 

const handlePeriodChange = useCallback((next) => {

 

 

next = 자식(함수를 이용한 주체)에서 넘어온 “새 값”

 

setLocalPeriod((prev) => {

 

prev = React가 보장하는 “가장 최신 localPeriod”

 

if (
  prev.year === next.year &&
  prev.month === next.month &&
  prev.week === next.week
) return prev;

 

 

 의미:

• 값이 완전히 같으면
• state를 바꾸지 않음
• 리렌더 방지 + effect 재실행 방지

 

return next;

 

값이 다를 때만 실제 업데이트

 

}, []);

 

deps가 []

• 이 함수는 한 번만 생성
• 렌더가 반복돼도 같은 함수 참조 유지

 

 

 

 

1-1, 1-2와 같은 예시들을 보았을 때,  화살표 함수의 “진짜 역할” 을 아래에 정리해보자

 

✔️  화살표 함수의 핵심 역할 3가지

 

① 실행을 “지연”시키기

useState(() => heavyCalculation())

 

의미:

“지금 계산하지 말고, 필요할 때 React가 실행해라”

 

 

 

② 실행 주체를 React에 “위임” 하기

setState((prev) => prev + 1);

 

의미:

“현재 state는 네가 알고 있으니(prev), 그걸 써서 계산해줘”

 

 

 

③ 참조(Reference)를 값으로 다루기

useCallback(() => doSomething(), []);

 

의미:

“이 함수 자체를 하나의 값으로 기억해둬”

 

 

 

 

❌ 잘못된 인지

“화살표 함수는 처음 렌더 때 한 번만 실행된다”

 

✅ 올바른 인지

“화살표 함수는 ‘지금 실행하지 않고’, React가 필요할 때 실행하도록 넘기는 표현 이다.”

 

 

 

 

✔️ 화살표 함수의 의미 구분

위치	화살표 함수 의미
useState(() => x)	초기값을 lazy로 계산
setState(prev => x)	최신 state 기반 안전한 업데이트
useMemo(() => x, deps)	값 계산 캐싱
useCallback(() => fn, deps)	함수 참조 캐싱
일반 () => {}	그냥 함수

 

 

한 줄 결론

화살표 함수 자체가 “한 번만 실행”을 의미하는 건 아니고,
어떤 Hook에 전달되었느냐에 따라 의미가 달라진다.