간단한 화살표함수가 필요할 때 다들 어떻게 하시나요?

[SanginJeong]

다른 분들은 어떻게 코드 짜는지 궁금해서 질문남깁니다.

아래 코드는 렌더링 부분에 온클릭 함수를 바로 넣어놓은 코드입니다.

import { useState } from 'react'
import './App.css'
export default function App() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count+1)} >증가</button>
      <button onClick={() => setCount(count-1)}>감소</button>
    </>
  )
}

{() => setCount(count+1)}

리렌더링 될 때마다 위 함수를 새롭게 계속 생성하기 때문에 효울적이지 못하다고 합니다.

import { useState } from 'react';
import './App.css';

export default function App() {
  const [count, setCount] = useState(0);

  const handleIncrease = () => setCount(count + 1);
  const handleDecrease = () => setCount(count - 1);

  return (
    <>
      <p>{count}</p>
      <button onClick={handleIncrease}>증가</button>
      <button onClick={handleDecrease}>감소</button>
    </>
  );
}

위 코드와 같이 함수를 빼주는 것이 좋다고 합니다.

지양글을 보고 Form 태그 개발 중 생긴 의문

원래 하던 방식

• onChange에 화살표 함수를 직접 넣어주면서 코드가 짧고 username, email state를 따로 관리함

import { useState } from 'react';

export default function App() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Username: ${username}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
        placeholder="Username"
      />
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

화살표 함수를 렌더링 부분에 사용하는 걸 지양하라는 글을 보고 난 후

• username, email을 한 객체에 관리하면서 handleChange 함수를 만들어 줌

import { useState } from 'react';

export default function App() {
  const [formValues, setFormValues] = useState({
    username: '',
    email: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Username: ${formValues.username}, Email: ${formValues.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        name="username" 
        value={formValues.username} 
        onChange={handleChange} 
        placeholder="Username"
      />
      <input 
        type="email" 
        name="email" 
        value={formValues.email} 
        onChange={handleChange} 
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

처음에는 그냥 함수 빼주는게 번거롭지 않다고 생각했지만 form 태그의 onSubmit 부분을 작업하던 중에 이렇게까지 하면서 함수를 빼줘야할까? 라는 생각이 들어서 어떻게 하시는지 질문 남깁니다.

[AlangGY]

리렌더링 될 때마다 위 함수를 새롭게 계속 생성

비교해주신 두가지 방식에 대해서, 함수의 선언 횟수는 차이가 없어보입니다.

물론 자바스크립트 엔진에서 무언가 최적화 처리를 하는데 있어서 영향을 줄 수는 있지만, 그러한 것들은 대체로 그 차이가 미미한 수준으로, 코드 레벨에서 그것을 고려하는것은 불필요하지 않을까라는 생각이구요.

따라서 저같은 경우에는 성능의 관점 보다는 가독성의 관점으로 판단하고 정하게 되는 것 같습니다.

그러한 관점에서 생각했을땐..

• jsx 구문이 너무 복잡하거나 함수 코드가 너무 복잡할 경우 인라인하지 않는다.

정도가 저의 취향일것 같네요:)

---

p.s 함수 선언 횟수에 차이가 없다고 생각하는 이유

예시로 들어주신 코드에서
리액트의 "컴포넌트의 리렌더링이 일어난다" 것을 자바스크립트의 동작으로서만 생각해보자면
"해당 컴포넌트 함수가 호출된다."이라고도 말할 수 있을텐데요.

자바스크립트의 함수가 호출 및 실행 될때는 중괄호 내부의 모든 코드들이 모두 실행되게 될겁니다.
그렇기 때문에 return 구문이라고 한번 더 실행되는 일은 없다고 볼 수 있을것 같아요.

import { useState } from 'react';
import './App.css';

export default function App() {.                    // <- App 컴포넌트 함수가 리렌더링(호출)되면,
  const [count, setCount] = useState(0);

  const handleIncrease = () => setCount(count + 1);    // <- 이 코드 라인도 실행될 것이고,
  const handleDecrease = () => setCount(count - 1);

  return (
    <>
      <p>{count}</p>
      <button onClick={handleIncrease}>증가</button>      // <- 이 코드 라인도 실행될 것이다.
      <button onClick={handleDecrease}>감소</button>
    </>
  );
}

함수 생성 횟수를 줄이기 위한 처리로는 아래와 같은 방법이 있지 않을까라고 생각합니다.

1. useCallback과 같은 react의 메모이제이션 api를 활용하여 선언한 함수를 재사용한다.
2. 해당 함수를 컴포넌트 함수 외부에서 선언하여 사용한다. (단. 리액트 라이프사이클과는 의존성이 없는 함수여야 할것)

[SanginJeong]

좋은 답변 감사합니다~

[KimChunsick]

저는 렌더링 태그에 인라인으로 화살표 함수를 직접 넣는 편인데요, 이유는 다음과 같습니다.

1. 특별한 경우가 아니면 성능 차이가 거의 없다.

태그 안에 인라인 함수를 쓰든, 컴포넌트 내부에서 함수를 선언하든, 렌더링마다 함수는 새로 생성되므로 일반적으로 큰 차이가 없습니다.

다만, 함수를 자식 컴포넌트에 Prop으로 넘겨야 할 땐 주의가 필요합니다. 예를 들어 아래 코드처럼 인라인 함수를 넘길 경우, Parent가 렌더링될 때마다 Child에 전달되는 함수 참조가 계속 바뀌어 Child도 매번 리렌더링됩니다.

// 부모 컴포넌트
function Parent() {
  return <Child onMyClick={() => alert('Click!')} />;
}

// 자식 컴포넌트
interface ChildProps {
  onMyClick: () => void;
}
function Child({ onMyClick }: ChildProps) {
  return <div onClick={onMyClick}>Click Me!</div>;
}

이럴 땐 useCallback을 사용하면 함수를 매 렌더링마다 새로 생성하지 않도록 막을 수 있어, 자식 컴포넌트의 불필요한 리렌더링을 줄일 수 있습니다.

// 부모 컴포넌트
function Parent() {
  const handleMyClick = useCallback(() => {
    alert('Click!');
  }, []);

  return <Child onMyClick={handleMyClick} />;
}

// 자식 컴포넌트
interface ChildProps {
  onMyClick: () => void;
}
function Child({ onMyClick }: ChildProps) {
  return <div onClick={onMyClick}>Click Me!</div>;
}

2. 시점 이동이 적어 코드가 더 직관적이다.

너무 길지 않은 크기의 인라인 함수의 경우, 시점 이동이 적어 실제로 코드를 읽을 때 편하다는 장점이 있어요.
컴포넌트의 마크업 부분이 길어진 경우, 로직을 확인하기 위해 위, 아래를 많이 이동할 필요 없이 바로 확인이 가능하기 때문이에요.

저는 위 2가지의 이유로 태그 내에서 인라인으로 화살표 함수를 사용하는 편입니다!

[milooy]

저도 일회성인 함수는 시점 이동 관점에서 인라인을 유지하는 편이에요.

함수 선언문을 따로 뺄때는

• 여러 번 사용되거나
• 주요한 로직이거나
• 인라이닝 하기에는 길고 복잡하거나

하는 경우였습니다.

[SanginJeong]

좋은 답변 감사합니다~

[milooy]

AI 토론 요약: 간단한 화살표 함수를 어떻게 처리할 것인가?

리액트 컴포넌트에서 화살표 함수 사용 방식을 두고 성능, 가독성, 유지보수성을 중심으로 다양한 의견이 오갔어요.

1. 질문

• 렌더링 태그 안에서 화살표 함수를 직접 작성하면 리렌더링 시마다 함수가 새로 생성되어 비효율적이라는 피드백을 받았어요.
• 이를 개선하기 위해 함수를 분리하거나, 기존 인라인 방식을 사용하는 것 중 어느 것이 더 나은지 질문했어요.

---

2. 성능 관점

• 일반적으로 리렌더링 시 컴포넌트 전체가 호출되므로 함수 생성 자체는 자바스크립트 엔진의 최적화 덕분에 큰 성능 차이를 유발하지 않아요.
• 하지만, 자식 컴포넌트에 Prop으로 전달할 때는 인라인 함수로 인해 매번 참조가 바뀌어 불필요한 리렌더링이 발생할 수 있어요.
• 이런 경우에는 useCallback을 사용해 메모이제이션하는 게 필요해요.

---

3. 가독성과 유지보수성 관점

• 인라인 방식: 간단하고 짧은 로직의 경우, 시점 이동이 적어서 코드를 읽기가 더 직관적이에요.
• 함수 분리 방식: JSX 구문이 복잡하거나 로직이 길고 주요한 경우, 또는 여러 곳에서 재사용되는 경우에는 가독성과 유지보수성을 위해 함수 분리가 적합해요.

---

4. 함수 분리 기준

• 여러 번 재사용되는 경우.
• 주요 로직이나 복잡한 로직이 포함된 경우.
• 컴포넌트 외부에서 사용 가능하고 리액트 라이프사이클에 의존성이 없는 경우.

---

결론

• 인라인 방식: 간단하고 일회성인 로직에는 적합하며, 시점 이동이 적어 코드가 더 직관적이에요.
• 함수 분리 방식: 주요 로직, 복잡한 코드, 재사용이 필요한 경우에 권장되며, 자식 컴포넌트에 Prop으로 전달할 때는 불필요한 리렌더링 방지를 위해 useCallback 사용이 필수적이에요.

개발 상황과 코드 스타일에 따라 유연하게 선택하는 것이 중요하다는 공통된 결론이 도출되었어요.

[milooy]

@SanginJeong 님, 토론이 마무리된 것 같다면 'Close as resolved'를 눌러주실 수 있으실까요?
아직 논의되지 못한 부분이 있다면 말씀주세요!

[joshua1988]

훌륭하네요 👍