FE/리뷰

[모던 리액트 딥다이브] 1.2장 함수

따봉치치 2024. 6. 21. 18:51
728x90

 

함수란
  • 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것
  • 리액트에서 컴포넌트를 만드는 함수도 자바스크립트 함수의 기초적인 형태를 따름
  • 자바스크립트에서 함수는 다른 함수의 매개변수가 될 수 있고, 반환값이 될 수 있으며, 할당도 가능하므로 일급 객체임

 

 

함수를 정의하는 방법
  • 함수 선언문
    • 가장 일반적으로 사용하는 방식
    • 표현식이 아닌 일반 문으로 분류됨
function add(a,b) {
	return a + b;
}
  • 함수 표현식
    • 함수를 변수에 할당해 표현하는 방식
    • 할당하려는 함수의 이름을 생략하는 것이 일방적
const sum = function (a,b) {
	return a + b;
}

sum(10, 24)

 

함수 선언문 함수 표현식
호이스팅으로 인해 함수 선언문은 먼저 메모리에 등록됨 함수를 변수에 할당하기 때문에 변수만 호이스팅 될 뿐 변수에는 undefined가 할당됨
코드의 순서에 상관없이 정상적으로 함수 호출 가능 런타임 시점에 함수가 할당되어 동작하기 때문에 코드의 순서에 상관있음
함수를 자유롭게 선언하고 어디서든 자유롭게 호출가능 함수가 선언되기 전에 함수를 호출하지 않음

 

  • Function 생성자
    • 실제 코딩에서 사용되지 않는 방법
  • 화살표 함수
    • ES6에서 새롭게 추가된 함수 생성 방식
    • function 키워드 대신 => 라는 화살표르 활용해 함수 생성
    • 생성자 함수로 화살표 함수를 사용할 수 없음
    • arguments가 존재하지 않음
    • 함수 자체의 바인딩을 갖지 않음
    • this가 선언되는 시점에 이미 상위 스코프로 결정되어 있음
const add = (a,b) => a+b;

 

 

 

다양한 함수
  • 즉시 실행 함수 (IIFE)
    • 함수를 정의하고 그 순간 즉시 실행되는 함수
    • 단 한 번만 호출되고, 다시금 호출할 수 없음
    • 일반적으로 즉시 실행 함수에 이름을 붙이지 않음
    • 글로벌 스코프를 오염시키지 않고 독립적인 함수 스코프를 운용할 수 있음
    • 코드를 읽는 이로 하여금 이 함수는 어디서든 다시금 호출되지 않는다는 점을 각인시킬 수 있어 리팩토링에 도움됨
(function(a,b) {
	return a+b
})(10,24)

 

  • 고차 함수
    • 함수를 매개변수로 받거나 결과로 새로운 함수를 반환
    • 고차 함수를 활용해 고차 함수 컴포넌트를 만들 수 있음
    • 고차 함수 컴포넌트는 컴포넌트 내부에서 공통으로 관리되는 로직을 분리해 관리할 수 있어 효율적으로 리팩토링 가능함
// 함수를 매개변수로 받는 대표적인 고차 함수, Array.prototype.map
const doubledArray = [1,2,3].map((item) => item * 2)

// 함수를 반환하는 고차 함수
const add = function(a) {
	return function(b) {
    		return a + b
   	}
}

add(1)(3)

 

 

 

함수를 만들 때 주의 사항
  • 함수의 부수 효과를 억제할 것
  • 가능한 한 함수를 작게 만들 것
  • 누구나 이해할 수 있는 이름을 만들 것
부수 효과(side-effect) : 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것
부수 효과가 없는 함수를 순수 함수, 부수 효과가 존재하는 함수를 비순수 함수라고 함

 

728x90