본문 바로가기

카테고리 없음

[JavaScript] Arrow Function (), {}, 소괄호, 중괄호의 차이

arrow 쓸 때 한 줄로만 나타낼 수 있으면 {} 생략할 수 있습니다.
함수 내용이 여러 줄일 경우 {}로 묶어주고
리턴되는 내용은 ()로 묶어서 나타낼 수 있습니다.

 

arrow function 은

 

() => {} 이런형식으로 많이 쓴다.

 

() => () 이렇게도 쓸수 있다. ReactJS를 쓰는 JSX 에서는 컴포넌트를 함수로 만들어 줄때 소괄호를 쓴다.

또 이런 경우 {} 중괄호는 오류가 발생된다. 왜일까?

 

() 는 return을 포함한 구문이었던 것이다.

 

따라서 {} 중괄호로 구문을 여는 것은 데이터를 처리해주고 값을 반환하지 않아도 될때 이용하면 된다. 예를 들어 text 수정 , 값 연산

반면에 JSX에서 작성해준 태그를 함수로 만드는 것은 함수의 형식만 빌리고 바로 반환을 해줘야 하기 때문에 () 소괄호를 쓰는 것이다.

() 를 쓰기 싫다면 {} 중괄호로 작성하고 내부에서 값을 반환해 주기만 하면 JSX에서도 사용할 수 있다.