React 함수와 JavaScript 함수의 차이

React/React Core

React 함수와 JavaScript 함수의 차이

atomicdev 2024. 12. 2. 08:52

728x90

React 함수와 JavaScript 함수는 근본적으로 JavaScript에서 실행되는 코드이지만, React에서 사용하는 함수는 React의 특정 개념이나 기능에 초점을 맞춥니다. 아래는 React 함수와 JavaScript 함수의 차이점과 용도에 대한 설명입니다.

1. JavaScript 함수

JavaScript 함수는 코드의 재사용성을 높이고 특정 작업을 수행하기 위해 정의된 일반적인 함수입니다. React와 관계없이 순수하게 JavaScript 언어 자체에서 사용하는 함수입니다.

특징:

목적: 특정 작업을 수행하거나 값을 반환.
종류: 일반 함수, 화살표 함수, 익명 함수 등.
호출 방법: 직접 호출하거나 이벤트에 의해 호출.

유형

일반 함수:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

화살표 함수:

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

사용 예:

데이터를 계산하거나 처리할 때.
이벤트 핸들러를 정의할 때.
모듈화된 로직을 구현할 때.

2. React 함수

React에서 사용하는 함수는 컴포넌트 함수 또는 Hooks가 포함됩니다. React는 JavaScript의 라이브러리이므로 React 함수도 JavaScript 함수지만, React 애플리케이션을 구성하기 위해 특별한 규칙과 사용 목적이 있습니다.

(1) React 컴포넌트 함수

React에서는 컴포넌트를 정의할 때 함수형 컴포넌트를 사용할 수 있습니다. 이는 UI를 렌더링하기 위한 함수입니다.

특징:

React의 상태와 생명주기를 다룰 수 있음.
JSX를 반환하여 UI를 정의.
반드시 첫 글자를 대문자로 작성해야 함.

예:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 사용
<Greeting name="Alice" />

(2) React Hook 함수

React Hook은 React 16.8 이후 추가된 기능으로, 함수형 컴포넌트에서 상태와 생명주기를 사용할 수 있도록 도와주는 특수 함수입니다.

주요 Hook:

useState: 상태 관리

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect: 사이드 이펙트 관리

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Component mounted or updated');
    return () => {
      console.log('Component unmounted');
    };
  });

  return <div>Check the console</div>;
}

커스텀 Hook: 로직을 재사용하기 위해 사용자 정의 가능

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

3. React 함수와 JavaScript 함수의 주요 차이점

항목	JavaScript 함수	React 함수
목적	일반적인 작업 수행	UI 렌더링 및 React 상태/생명주기 관리
리턴값	어떤 값이든 반환 가능 (문자열, 숫자, 객체 등)	JSX 또는 null
호출 방식	직접 호출	React에서 렌더링 중 호출 (컴포넌트 함수)
특수 기능	없음	Hook을 통해 상태와 생명주기 관리 가능
사용 규칙	제한 없음	컴포넌트 이름은 대문자로 시작, Hook은 특정 규칙 준수 (use로 시작)

결론

JavaScript 함수는 범용적이며 React 외부에서도 사용 가능한 일반적인 함수입니다.
React 함수는 React 애플리케이션 내에서 상태 관리, 생명주기 처리, UI 렌더링 등 React와 밀접하게 연관된 작업을 수행하기 위해 사용됩니다.

728x90