React 화살표 함수를 사용할 때 return문과 소괄호

JSX문법에서 return문을 상요할때 소괄호를 사용해야한다.

const App = () => {
	return(
	
    );
};

최상위 엘리먼트로 감싸주면 소괄호를 빼도 된다.

• jsx에서 반환해야 하는 값을 인식하기 때문이다.
• return문 바로 뒤에 적어야 한다. 다음행에 작성하려면 소괄호를 기재해서 값들을 묶어주어야 한다.

const App = () => {
	return<div>
    	<h1>HI</h1>
    </div>
};


// 안됨
// const App = () => {
//   return
//     <div>
//       <h1>HI</h1>
//     </div>
// };

중괄호가 있다면 return문이 있어야만 반환을 한다.

그런데 화살표 함수는 괄호로 감싸진 부분이 return이 된다.

return문을 작성하지 않아도 된다는 말

() => ___ 이 형식은 ()=>{return문}과 같은 의미이다

const App = () => (
	<div>
    	<h1>HI</h1>
    </div>
);

 

• 매개변수가 없는 함수라면 중괄호와 return문이 필요하다

 

비교

• 모두 적용

const Counter = () => {
  return ( 
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        total: { dummyTweets.length } 
        </div>
      </div>
    </div>
    );
  };

• return뒤에 소괄호 생략

const Counter = () => {
  return <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        total: { dummyTweets.length } 
        </div>
      </div>
    </div>
};

• 중괄호와 return 소괄호 모두 생략

const Counter = () => <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        total: { dummyTweets.length } 
        </div>
      </div>
    </div> ;
    
    
    
    //짧다

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions