프론트엔드 개발에서 함수를 활용하는 방법 두 가지

함수의 용도는 기본적으로 반복되는 코드를 줄이는 것이다.

FE 개발에 있어 함수의 리턴 값에는 크게 두 종류가 있다.

• 연산의 결과
• UI 요소
  이 중 오늘은 두번째 경우에 대해 이야기를 해보려고 한다.

첫번째 패턴의 경우 의식하지 않아도 곧잘 사용한다. 그러나 두번째 패턴의 경우 우리에게 익숙한 수학적 함수의 개념과 다소 차이가 있기 때문에, 사고방식을 의식적으로 확장하지 않으면 활용하기 어렵다.

우리가 아는 그 함수

 

함수가 값을 리턴하는 것은 단순히 연산의 결과값을 도출하는 게 아니다. 함수의 호출 부분이 리턴 값으로 대체된다는 것을 의미한다.
즉, 특정 UI 요소가 반복된다면 우리는 이를 여러 번 작성하는 대신 UI를 리턴하는 함수를 활용할 수 있다. 함수를 호출한 부분에 우리가 원하는 UI가 들어올 것이다.

 

❗️유사한 코드가 반복된다면 이를 재사용 가능한 함수로 만들자.

 

함수의 활용 예시

• Javascript querySelector

const espressonMenuName = document.querySelector(“#espresso-menu-name”).value;

document.querySelector(“#menu-submit-button”).addEventListener(“click”, addMenuName);

document.querySelector(“#menu-name”)”.addEventListener("k“ypress",”(e) => {
  if (e.key === “Enter"){
    addMenuName();
  }
});

document.querySelector() 가 반복되는 것을 확인할 수 있다.
이렇게 반복되는 코드를, 함수를 활용해 줄일 수 있다.

UI요소를 리턴하는 것은 아니지만, 코드의 반복을 줄인다는 점에서 함수의 용도를 잘 활용했다고 볼 수 있다.

const $ = (selector) => document.querySelector(selector);

const espressonMenuName = $(“#espresso-menu-name”).value;

$(“#menu-submit-button”).addEventListener(“click”, addMenuName);

$(“#menu-name”)”.addEventListener("k“ypress",”(e) => {
  if (e.key === “E“ter”)”{
    addMenuName();
  }
});

• Javascript [요소명]Template 함수
  정보를 입력 받아 html element를 리턴하는 함수
• 함수형 컴포넌트
  너무 자연스럽게 써왔기 때문에 의식하지 못했지만, 리액트의 함수형 컴포넌트도 이와 비슷한 맥락이다. 리액트의 컴포넌트는 props라는 인자를 받고, 이를 사용해 UI요소(jsx)를 리턴한다.
  
  우리가 한 컴포넌트에서 다른 컴포넌트를 import해 사용하는 것은, 결국 import한 (컴포넌트)함수를 호출하고 해당 함수의 리턴값이 함수 호출부에 들어오게끔 만드는 것과 같다.