TIL.자바스크립트 면접질문 정리4.

1. 클래스형 컴포넌트 vs 함수형 컴포넌트

리액트를 사용하여 프론트엔드 개발을 할 때 두 가지방법으로 컴포넌트를 선언할 수 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만 함수형 컴포넌트에 리액트 훅을 지원해주어 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.

클래스형 컴포넌트의 경우 state기능,라이프 사이클 기능을 사용할 수 있다. render함수가 꼭 있어야 하고, 그 안에서 보여주어야할 JSX를 반환해줘야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

export default App;

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 더 편하고 메모리 자원을 덜 사용한다는 장점이 있다. 함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수 선언 방식이 있고 화살표 함수 방식도 있다.

function BlackDog() {
  this.name = '흰강아지';
  return {
    name: '검정강아지',
    bark: function() {
      console.log(this.name + ': 멍멍!');
    }
  }
}
const blackDog = new Blackdog();
blackDog.bark(); // 검정강아지: 멍멍!

function WhiteDog() {
  this.name = '흰강아지';
  return {
    name: '검정강아지',
    bark: () => {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const whiteDog = new Whitedog();
whiteDog.bark(); // 흰강아지: 멍멍!

function()을 사용하면 검정강아지가 나타나고 화살표함수를 사용하면 흰 강아지가 나타난다.
일반함수는 자신이 종속된 객체를 this로 가리키며,화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
클래스형 컴포넌트에서는 클래스 내의 constructor메서드에서 state의 초기값을 생성해주어야 한다. 그리고 constructor작성할 때 super(props)를 반드시 호출해주어야 한다. state를 조회할 때는 this.state로 조회하며,state의 값을 변경하고 싶을 때는 this.setState함수를 통해 바꾸어준다.

함수형 컴포넌트에서는 리액트 훅을 사용하여 useState함수를 통해 state값을 불러오고 변경할 수 있다.

2.함수 선언식과 함수 표현식의 차이

함수 선언식(Function Declaration)

function 함수명(){
  구현 로직
}

일반적인 프로그래밍언어에서의 함수선언과 비슷한 형식

함수표현식(Function Expression)

var test1=function(){
  return '익명 함수표현식';
}
var test2=function test2(){
  return '기명 함수표현식';
}

• 변수 값에 함수표현을 담아 놓은 형태
• 함수표현식은 익명 함수표현식과 기명 함수 표현식으로 나눌 수 있다.
  익명 함수표현식: 함수에 식별자가 주어지지 않는다.
  기명 함수표현식: 함수의 식별자가 존재한다.
  함수 표현식의 장점
• 클로져로 사용

클로저는 함수를 실행하기 전에 해당 함수에 변수를 넘기고 싶을 때 사용한다.
function tabsHandler(index){
  return function tabClickEvent(event){
    console.log(index);
  };
}
var tabs=document.querySelectorAll('.tab');
var i;
for(i=0; i<tabs.length; i+=1){
  tabs[i].onclick=tabsHandler(i);
}

위 예제는 모든 .tabs요소에 클릭 이벤트를 추가하는 예제다. 클로저를 이용해 tabClickEvent()에서 바깥함수 tabsHandler()의 인자값 index를 접근했다는 점.

• 콜백으로 사용(다른 함수의 인자로 넘길 수 있음)

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

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

function logMessage(){
  return 'worked';
}
var sumNumbers;

logMessage();//'worked'
sumNumbers();// Uncaught TypeError:sumNumbers is not a function.

sumNumbers=function(){
  return 10+20;
};

함수 표현식 sumNumbers에서 var도 호이스팅이 적용되어 위치가 상단으로 끌어올려졌다.
하지만, 실제 sumNumbers에 할당된 function로직은 호출된 이후에 선언되므로, sumNumbers는 함수로 인식하지 않고 변수로 인식한다.

참고:https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

3. push와 concat

push는 기존 배열에 값을 추가하여 원본을 바꾼다.

const array=[1,2];
array.push(3);
console.log(array);//[1,2,3]

concat은 기존배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다.

const array=[1,2];
let result=array.concat(3);
console.log(array);//[1,2]
console.log(result);//[1,2,3]