[#. React] React functional 함수형 컴포넌트에서 const(arrow function) vs function 차이점

 

 

 

 

 

 

React Hook을 사용하는 함수형 컴포넌트에서 

 

 

① const(Arrow Function)

 

import React from 'react';

const TestPage = () => {
  return(
    <div>
      TEST
    </div>
  )
}

export default TestPage;

 

 

 

② Function

 

import React from 'react';

function TestPage() {
  return(
    <div>
      TEST
    </div>
  )
}

export default TestPage;

 

이렇게 두 가지로 사용하는 것을 볼 수 있다

이 두 가지 방식의 차이점이 궁금하다

 

 

 

 

⑴ const 

 

const printThing = () => {
  console.log(`Random number : ${getRandom()}`)
}

printThing()

const getRandom = () => (
  ((Math.random() * 10000).toString().split('.')[0])
)

 

ReferenceError: Cannot access 'getRandom' before initialization 발생

ES6에서 let/const의 호이스팅이 되지 않는다는 특징 때문에 발생하는 문제다

호이스팅 관련한 부분을 참고하자면 이렇다

 

 

developer0809.tistory.com/23

[#JavaScript] ECMA Script, ES5와 ES6의 차이, ES6 문법 특징

@ 호이스팅(hoisting) 될 수 없다

호이스팅(hoisting)

= 들어올리다

코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것

선언 부분만 호이스팅 한다 할당 부분은 호이스팅하지 않는다

함수 내에서 선언한 함수 범위(function scope)의 변수는, 해당 함수 최상위로 호이스팅 된다 

function hoistingTest() {
   console.log(x);			// undefined
   var x = 100;
   console.log(x);			// 100
}

 

첫 번째 콘솔 로그에 출력된 undefined는 x의 값이 할당되지 않았다는 의미다

x값 할당 후 두 번째 콘솔 로그에는 할당한 값이 출력된다

 

함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는, script 단위의 최상위로 호이스팅 된다

hoistingTest();

function hoistingTest() {
   console.log("test");
}

hoistingTest() 함수 위에서 먼저 호출해도 "test"가 콘솔 로그에 출력되는 것을 볼 수 있다

 

hoisting();

const hoisting = () => {
   console.log("test");
}

=> Error: Cannot access 'hoisting' before initialization

 

하지만 arrow function는 호이스팅되지 않기 때문에 이와 같이 함수 위에서 먼저 호출하면 에러가 발생한다

 

 

var 변수는

[선언 - 초기화]
[할당]

단계를 거치게 된다

 

 

하지만 let/const 변수는

[선언]
[TDZ(Temporal Dead Zone)]
[초기화]
[할당]

단계를 거치게 된다

 

TDZ(Temporal Dead Zone)는 변수 선언(호이스팅에 의해 스코프 상단으로 끌어올려진 부분)후 변수가 할당되기 전 부분이다

선언은 되어 있지만 할당이 되어 있지 않으므로 임시적으로 죽어있는 구간이라고 이해하면 된다

 

초기화가 되기 전에 변수에 접근하려 한다면 TDZ(Temporal Dead Zone)에 의해서 에러가 발생하게 된다

그래서 위 예제에서 ReferenceError: Cannot access 'getRandom' before initialization 발생한 것이다

 

 

 

⑵ function

 

printThing()

function printThing() {
  console.log(`Random number : ${getRandom()}`)
}

function getRandom() {
  return (
    ((Math.random() * 100).toString().split('.')[0])
  )
}

 

printThing() 함수가 호이스팅 돼서 랜덤 숫자가 잘 출력된다

 

 

 

 

 

 

 

 

 

 

 

아래 사이트를 참고했다

 

softwareengineering.stackexchange.com/questions/364086/why-use-const-foo-instead-of-function-foo

Why use `const foo = () => {}` instead of `function foo() {}`