React 화살표 함수

React에서 return 문 용법과 겹치는 용법이 바로 "화살표 함수"

 

React에서 함수를 표현할 때 화살표 함수를 쓰는 것은 거의 표준.

JSX에서 return문의 용법을 정확히 알아보자

 

기존의 함수 표현식에서 function 키워드를 삭제하고 인자로 받는 매개변수의 소괄호() 와 코드블록 {} 사이에 화살표 => 만 넣어주면 된다.

 

* 기존 함수 표현식

function abc(a) {
	return a;
}

 

 

* 화살표 함수

const abc(a) => {
	return a;
}

 

중괄호 안에 return 문이 있다는 것이 JSX에서 return문의 용법과 헷갈릴 수 있는 부분이다.

 

React 에서 화살표 함수를 기재할 때

() => __ 형식으로 기재하면 return 은 빼도 된다.

그러나 중괄호를 기재한다면 중괄호 안에 return 문을 꼭 써줘야 하고 return 문 뒤에 소괄호를 넣으면 return 다음행에 최상위 엘리먼트를 기재하고 return 뒤에 소괄호를 뺀다면 return 과 같은 행에 최상위 엘리먼트를 기재해야 한다는 것.

 

() 는 파라미터가 없어서 비워둔 채로 소괄호 작성

const Counter = () => {
	return (
    	<div className = "tweenForm_input">
        	total : {dummyTweets.length}
        </div>
    );
};

 

 

const (Arrow Function) 와 function 의 또 다른 차이점은?

import React from 'react';

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

import React from 'react';

function TestPage() {
	return (
    	<div>
        	Test
        </dvi>
    )
}

 

var 변수

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

 

let/cons 변수

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

 

단계를 거친다.

 

*TDZ (Temporal Dead Zone)

변수 선언 후 변수가 할당되기 전 단계이다.

선언은 되어있지만 할당이 되어 있지 않으므로 임시적으로 죽어있는 구간이다.

 

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

 

구체적인 예시는 아래 참고 사이트를 참고하면 된다.

---

참고사이트

 

https://jobcoding.tistory.com/105

[React] 화살표 함수와 return 문 소괄호 처리

const 에러 예시 사이트

https://developer0809.tistory.com/102

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