화살표 함수, 익명함수, this 바인딩 차이

언어 및 도구들 공부/React

화살표 함수, 익명함수, this 바인딩 차이

Dr.Mlem 2024. 11. 17. 03:21

Q1.

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is rendered using React.</p>
  </div>
);

이 코드에서, const App = () => 부분은, 익명의 즉시 실행 함수를 화살표 함수로 표현한거야?

A1.

아니요, const App = () => 부분은 익명의 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)가 아니라, 화살표 함수(Arrow Function)를 사용하여 선언한 컴포넌트입니다.

차이점 정리

1. 화살표 함수로 선언된 컴포넌트

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is rendered using React.</p>
  </div>
);

이 코드는 App이라는 이름의 함수형 컴포넌트를 선언한 것입니다.
화살표 함수는 단순히 컴포넌트의 반환값을 정의하는 역할을 합니다.
리액트에서는 컴포넌트는 함수로 작성되며, JSX를 반환하는 함수는 React가 알아서 렌더링 처리합니다.
중요한 점: 이 함수는 호출되지 않고, ReactDOM이 호출해서 렌더링 과정에 사용됩니다.

2. 익명의 즉시 실행 함수 (I I F E)

(() => {
  console.log("IIFE 실행!");
})();

IIFE는 선언과 동시에 실행되는 함수입니다.
주로 스코프를 제한하거나 초기화 작업을 수행할 때 사용됩니다.
const App = () => {}는 호출되지 않는 이상 실행되지 않으므로, IIFE와 다릅니다.

리액트 화살표 함수 컴포넌트의 특징

리액트에서 함수형 컴포넌트는 다음과 같은 특징이 있습니다:

화살표 함수로 정의 가능: const App = () => { ... }
JSX를 반환해야 함.
ReactDOM이 render() 호출 시 실행되며, 반환된 JSX가 실제 DOM으로 변환됩니다.

핵심 요약

**const App = () =>**는 리액트 함수형 컴포넌트를 정의한 화살표 함수입니다.
익명의 즉시 실행 함수(IIFE)가 아니며, ReactDOM이 필요할 때 실행합니다.
리액트에서는 이 패턴을 사용하여 가볍고 선언적인 컴포넌트를 작성합니다.

Q2. 즉시 실행 함수의 예제를 보여줘

A2.

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 정의되자마자 바로 실행되는 함수입니다. 이를 사용하면 별도의 호출 없이 바로 동작하도록 코드를 작성할 수 있습니다.

즉시 실행 함수의 기본 문법

(function() {
  console.log("IIFE 실행!");
})();

또는 ES6 화살표 함수로도 작성할 수 있습니다:

(() => {
  console.log("IIFE 실행 - 화살표 함수 버전!");
})();

다양한 즉시 실행 함수 예제

1. 초기화 작업에 사용

(function() {
  const userName = "John";
  console.log(`Welcome, ${userName}!`);
})();

2. 변수 스코프 제한

const globalVar = "Global";

(function() {
  const localVar = "Local";
  console.log(globalVar); // Global
  console.log(localVar); // Local
})();

// console.log(localVar); // ReferenceError: localVar is not defined

3. 매개변수를 전달

(function(a, b) {
  console.log(a + b);
})(5, 10); // 15

4. 반환값 사용

const result = (function() {
  return "IIFE의 반환값!";
})();
console.log(result); // "IIFE의 반환값!"

5. 비동기 작업에서 활용 (예: 비동기 함수로 IIFE 사용)

(async () => {
  const data = await new Promise(resolve => setTimeout(() => resolve("완료!"), 1000));
  console.log(data); // "완료!"
})();

즉시 실행 함수의 특징

함수가 선언되자마자 실행됩니다.
스코프를 분리하거나 초기화 작업을 수행할 때 유용합니다.
ES6 이후 let과 const로 블록 스코프를 활용하면서 IIFE 사용 빈도가 줄었지만, 여전히 유용한 패턴입니다.

Q3. 즉시실행 함수는 익명인거야?

A3.

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 보통 익명 함수로 작성되지만, 반드시 익명일 필요는 없습니다. 익명 함수일 수도 있고, 기명 함수일 수도 있습니다. 중요한 것은 선언되자마자 호출되는 함수 표현식이라는 점입니다.

1. 익명 즉시 실행 함수

(function() {
  console.log("나는 익명 즉시 실행 함수야!");
})();

위 함수는 익명이기 때문에 함수에 이름이 없습니다. 일반적으로 즉시 실행 함수는 이런 익명 함수 형태로 작성됩니다.

2. 기명 즉시 실행 함수

(function namedFunction() {
  console.log("나는 이름이 있는 즉시 실행 함수야!");
})();

특징:

이름이 있는 함수 표현식도 즉시 실행될 수 있습니다.
하지만, 이름은 내부에서만 사용됩니다.
- 예를 들어, 함수 내부에서 자기 자신을 호출하는 재귀 함수처럼 사용 가능합니다:

(function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1); // 자기 자신 호출
})(5); // 120

익명 vs 기명 즉시 실행 함수의 차이점

| 특징 | 익명함수 | 기명함수 |
| 함수에 이름이 있는가? | 없음 | 있음 |
| --- | --- | --- |
| 재귀 가능 여부 | 불가능 (내부에서 자기 참조 불가) | 가능 (함수 이름으로 자기 참조 가능) |
| 일반적인 사용 용도 | 단순히 초기화, 실행용으로 사용 | 재귀가 필요한 경우나 디버깅 목적으로 사용 |

정리

즉시 실행 함수는 익명 함수일 때가 일반적이지만, 꼭 익명이어야 하는 것은 아닙니다. 필요에 따라 이름을 부여할 수도 있고, 이름이 있으면 내부적으로 재귀 호출이나 디버깅에 활용할 수 있습니다. 😊

Q4.

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is rendered using React.</p>
  </div>
);

이걸 화살표함수가 아닌 형태로 한 번 작성해서 비교해줘

A4.

const App = () =>로 작성된 화살표 함수 컴포넌트를 일반적인 함수 선언 방식으로 작성하면 다음과 같이 변환됩니다:

화살표 함수 형태

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is rendered using React.</p>
  </div>
);

일반 함수 선언 형태

화살표 함수를 일반적인 함수 선언으로 바꾸면 이렇게 작성할 수 있습니다:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is rendered using React.</p>
    </div>
  );
}

주요 차이점

| 특징 | 화살표함수 | 일반 함수 선언 |
| 문법 | const App = () => {} | function App() {} |
| --- | --- | --- |
| this 바인딩 | this는 상위 스코프에 바인딩 (Lexical) | 호출 시점에 바인딩 (Dynamic) |
| 가독성 | 짧고 간결한 표현 가능 | 전통적인 함수 선언 형태 |
| React에서 사용 여부 | 함수형 컴포넌트 작성 시 선호됨 | 역시 함수형 컴포넌트로 사용 가능 |

리액트에서의 추천

리액트에서는 간결함과 최신 문법을 선호하기 때문에 화살표 함수 형태로 함수형 컴포넌트를 작성하는 것이 더 일반적입니다. 하지만, 일반 함수 선언 방식도 동일하게 작동하며, 두 방식은 기능적으로는 동일합니다.

결론적으로, 둘 중 어느 것을 사용하든 개인이나 팀의 코딩 스타일에 따라 선택하면 됩니다. 😊

Q5.
this 바인딩에서 있는 차이점은 뭐야?

A5.

화살표 함수와 일반 함수는 this 바인딩 방식에서 가장 큰 차이를 보입니다. 리액트와 같은 프레임워크에서 이 차이가 중요한 이유는, 이벤트 핸들러와 같은 상황에서 올바르게 this를 참조할 수 있어야 하기 때문입니다.

차이점 요약

| 특징 | 화살표 함수 | 일반 함수 |
| this 바인딩 방식 | 상위 스코프의 this를 그대로 사용 (Lexical) | 호출 시점에서 this가 동적으로 결정됨 (Dynamic) |
| --- | --- | --- |
| 사용 환경 | 클래스 내부, 이벤트 핸들러에서 this 문제 없음 | 클래스 내부에서 this를 명시적으로 바인딩해야 함 |
| React에서 사용 | 보통 컴포넌트 메서드나 핸들러에 사용 | 클래스 컴포넌트에서 종종 사용됨 |

1. 화살표 함수의 this 바인딩 (Lexical Binding)

화살표 함수는 자신만의 this를 가지지 않습니다.
대신, 화살표 함수가 선언된 **상위 스코프의 this**를 그대로 사용합니다.

예제:

const obj = {
  name: "React",
  printName: () => {
    console.log(this.name); // `this`는 obj가 아닌 상위 스코프(전역 객체)를 참조
  }
};

obj.printName(); // undefined (브라우저 환경에선 전역 객체의 this는 window)

리액트에서의 장점:

클래스 컴포넌트에서 이벤트 핸들러에 화살표 함수를 사용하면 this 문제를 걱정할 필요가 없습니다:

class App extends React.Component {
  handleClick = () => {
    console.log(this); // 클래스 인스턴스를 가리킴
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

2. 일반 함수의 this 바인딩 (Dynamic Binding)

일반 함수는 호출 시점에서 this가 동적으로 결정됩니다.
함수가 어떻게 호출되었는지에 따라 this가 달라집니다.

예제:

const obj = {
  name: "React",
  printName: function() {
    console.log(this.name); // 호출 시점에서 `this`는 obj를 참조
  }
};

obj.printName(); // "React"

const print = obj.printName;
print(); // undefined (전역 스코프에서 호출되므로 `this`는 전역 객체)

리액트에서의 문제:

클래스 컴포넌트에서 일반 함수로 이벤트 핸들러를 정의하면, this가 undefined가 되는 경우가 발생할 수 있습니다:

class App extends React.Component {
  handleClick() {
    console.log(this); // `this`가 undefined (strict mode)
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

해결 방법:

바인딩 명시:

class App extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this); // 명시적으로 바인딩
}

handleClick() {
console.log(this); // 올바르게 클래스 인스턴스를 참조
}

render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}

화살표 함수 사용:
- 화살표 함수를 사용하면 this 문제를 신경 쓰지 않아도 됩니다:

class App extends React.Component {
  handleClick = () => {
    console.log(this); // 클래스 인스턴스를 가리킴
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

핵심 요약

화살표 함수:
- this는 상위 스코프의 this를 그대로 사용(Lexical).
- 리액트에서 이벤트 핸들러에 적합하며, 별도의 바인딩 작업이 필요 없음.
일반 함수:
- 호출 시점에서 this가 동적으로 결정(Dynamic).
- 리액트 클래스 컴포넌트에서 사용하려면 bind 메서드로 바인딩하거나 this를 직접 명시적으로 설정해야 함.

리액트에서는 이러한 차이 때문에 화살표 함수가 더 자주 사용됩니다. 😊

'언어 및 도구들 공부 > React' 카테고리의 다른 글

JS 화살표 함수 복습 및 React 사전 공부 (2)	2024.11.17
클래스 인스턴스, 클래스 컴포넌트 (1)	2024.11.17
리엑트에서의 DOM 구조 (0)	2024.11.17
리엑트와 JS (0)	2024.11.16
NPM, yarn (0)	2024.11.16

현재글화살표 함수, 익명함수, this 바인딩 차이

Dr.Mlem Blog

Dr.Mlem knows nothing but borking

axios, cirpass, select, css, 오블완, java, 팁, w3c, React, js, 파라미터, DPP, mybatis, json, 티스토리챌린지, 오답노트, 배열, 컨트롤러, did, MYSQL, ajax, go, 포인터, JavaScript, 설치, Pointer, Spring, Props, 제너릭, html,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Dr.Mlem Blog