모던 리액트 Deep Dive - 함수

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.2 함수

함수의 다양한 형태와 이러한 함수의 차이점이 무엇인지 살펴보자!

1.2.1 함수란 무엇인가?

🌚자바스크립트에서 함수란?

• 작업을 수행하거나 값을 계산하는 동의 과정을 표현하고, 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것

💡리액트에서 컴포넌트를 만드는 함수 형태

function Component(props){
	return <div>{props.hello}</div>
}

---

1.2.2 함수를 정의하는 4가지 방법

1. 함수 선언문

• 표현식이 아닌 일반 문(statement)으로 분류됨
  • 표현식: 무언가 값을 산출하는 구문. 즉, 함수 선언으로는 어떠한 값도 표현되지 않았으므로 표현식이 아닌 일반 문으로 분류

2. 함수 표현식

• 함수는 다른 함수의 매개변수가 될 수도 있고, 반환값이 될수도 있으며, 할당도 가능하므로 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
• 함수를 변수에 할당하는것도 가능

const sum = function add(a, b) {
  // 함수 몸통에서 현재 실행 중인 함수를 참조하는 데 사용할 수 있음
  // 실제 프로덕션 코드에서 절대로 사용해선 안 됨!
  console.log(arguments.callee.name)
  return a + b
}

sum(10, 24)
// add
add(10, 24) // Uncaught TypeError: add is not defined

💡함수 표현식과 선언식의 차이

• 함수 표현식과 선언식의 차이점 → 호이스팅 여부
  • 호이스팅 : 함수 선언문이 마치 코드 맨 앞단에 작성된 것처럼 작동하는 자바스크립트의 특징 

hello() // hello

function hello() {
  console.log('hello')
}

hello() // hello

• 함수를 선언한 hello는 코드 중간에 있음에도 불구하고, 맨 앞에서 호출한 hello()는 어떠한 에러도 없이, 정상적인 hello 함수의 작동을 수행하는 것을 알 수 있다.
• 함수의 호이스팅 특징으로 함수 선언문이 미리 메모리에 등록됐고, 코드의 순서에 상관없이 정상적으로 함수 호출 가능

console.log(typeof hello === 'undefined') // true

hello() // Uncaught TypeError: hello is not a function

var hello = function () {
  console.log('hello')
}

hello()

• 함수 선언문과 다르게 정상적으로 호출되지 않고, undefined로 남아있다.
• 함수와 다르게 변수는 런타임 이전에 undefined로 초기화되고, 할당문이 실행되는 시점, 즉 런타임 시점에 함수가 할당되어 작동한다는 것을 알 수 있다.

3. Function 생성자

• 자바스크립트 오래 사용했다 하더라도 거의 사용해 본 적 없을 만한 함수 선언 방식

const add = new Function('a', 'b', 'return a + b')

add(10, 24) // 34

4. 화살표 함수

• ES6에서 새롭게 추가된 함수 생성 방식
• function이라는 키워드 대신 =>라는 화살표 활용
• constructor을 사용할 수 없다 즉, 생성자 함수로 화살표 함수를 사용하는 것은 불가능하다.
•  arguments가 존재하지 않는다.

const add = (a, b) => {
  return a + b
}

const add = (a, b) => a + b

💡화살표 함수와 일반 함수의 가장 큰 차이점→ this 바인딩

• 클래스형 컴포넌트에서 이벤트에 바인딩할 메서드 선언 시 화살표 함수로 했을 때와 일반 함수로 했을 때 다르게 작동함
• this :  자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 값

---

1.2.3 다양한 함수 살펴보기

리액트에서 자주 쓰이는 형태에 대해 알아보자!

1. 즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

• 함수를 정의하고 그 순간 즉시 실행되는 함수
• 단 한번만 호출되고, 다시 호출할수 없는 함수(재사용되지 않는 함수)

(function (a, b) {
  return a + b
})(10, 24); // 34

((a, b) => {
  return a + b
  },
)(10, 24) // 34

2. 고차함수 (Higher Order Function)

• 함수형 컴포넌트를 인수로 받아 새로운 함수형 컴포넌트를 반환하는 함수

// 함수를 매개변수로 받는 대표적인 고차 함수, Array.prototype.map
const doubleArray = [1, 2, 3].map((item) => item * 2)

doubleArray // [2, 4, 6]

// 함수를 반환하는 고차 함수의 예
const add = function (a) {
  // a가 존재하는 클로저를 생성
  return function (b) {
    // b를 인수로 받아 두 합을 반환하는 또 다른 함수를 생성
    return a + b
  }
}

add(1)(3) // 4

---

1.2.4 함수를 만들때 주의해야 할 사항

1. 함수의 부수 효과(side-effect)를 최대한 억제하라

• 함수 내의 작동으로 함수가 아닌 함수 외부에 영향을 끼치는 것을 최소화하고, 함수의 실행과 결과를 최대한 예측 가능하도록 설계해야 한다.

2. 가능한 한 함수를 작게 만들어라

• 하나의 함수에서 너무 많은 일을 하지 않게 한다.
• 구체적인 함수의 길이,크기를 정의하는 것은 불필요하지만, 가능한 함수의 크기를 작게 하는 것이 좋다.

3. 누구나 이해할 수 있는 이름을 붙여라

• 함수이름은 간결하고 이해하기 쉽게 붙이는 것이 좋다.