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의 호이스팅이 되지 않는다는 특징 때문에 발생하는 문제다
호이스팅 관련한 부분을 참고하자면 이렇다
@ 호이스팅(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
'React&React-Native > React' 카테고리의 다른 글
[#. React] redux-persist 설치 후 새로고침해도 state 유지하기 (1) | 2021.04.27 |
---|---|
[#. React] redux payload가 Promise {<pending>} 반환할 때 문제 해결, PromiseResult 가져오기 (0) | 2021.04.23 |
[#. React] Web/Mobile 웹/모바일 토글 메뉴바 toggle menubar 추가하기 (0) | 2021.04.15 |
[#. React] react-device-detect 설치 후 웹/모바일 감지해서 반응형 사이트 만들기 (0) | 2021.04.12 |
[#. React] React에서 swiper 사용하기, 배너 슬라이드 사용하기 (1) | 2021.04.09 |