1/ return뒤에 보통 ()소괄호를 사용하고, 만약 한줄이라면 ()소괄호도 생략이 가능하다. 반환하지 않는다면 {}중괄호를 사용한다. 단, 화살표 함수를 사용할 경우, () => ()형식으로 기재하면 return은 생략가능하지만 () => {}형식으로 기재하면 {}중괄호 안에 return문을 꼭 써줘야한다.

// case1. 중괄호 소괄호 return 용법도 모두 적용
const Counter = () => {
  return ( 
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        total: { dummyTweets.length } 
        </div>
      </div>
    </div>
    );
  };

// case2. return 뒤에 소괄호 생략
const Counter = () => {
  return <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        total: { dummyTweets.length } 
        </div>
      </div>
    </div>
  };

// case3. 중괄호와 return 소괄호 모두 생략
const Counter = () => <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        total: { dummyTweets.length } 
        </div>
      </div>
    </div> ;

2/ 자바스크립트에서 함수와 소괄호(호출연산자)는 정확히 무엇인가?

• sayHello라는 함수가 있을때, 프로그램 내에서 sayHello는 함수 객체 자체를 지칭하고, sayHello()는 함수의 실행결과를 말하는 것이다. 예를 들어, 아래와 같이 생긴 함수가 있다고 가정해보자. 이 부분에서 sample함수를 콜백함수로 전달하여 사용하는건데 왜 소괄호가 붙지 않는걸까? 그 이유는 이 시점에 바로 실행되는 것이 아니기 때문이다. 그래서 아래함수는 0.3초 후에 실행될 함수인 sample자체를 첫번째 인자로 넣어주고 있다.

  function sample() {
  	console.log('sample');
  }
  
  setTimeout(sample, 300);

  예를들어 아래와 같은 함수라고 하면, sample()자체는 함수의 실행결과, 즉 리턴값인 100이 돼서 setTimeout(100, 300)이나 다름없어져서 setTimeout의 사용법에 맞지 않게 되어버린다.

  function sample() {
  	return 100;
  }
  
  setTimeout(sample(), 300);

  그리고 아래에서 case1, case2의 onClick이벤트 리스너의 형태가 다른데, onClick={handleClickButton} 와 onClick={(e) ⇒ handleClickButton(e)} 는 결국 같다. case3에서 a, b도 결국 같은 결과를 가진다. (다만, case3은 좀 더 연구해봐야겠다.)

  // case1
  <button type="button" onClick={(e) => handleClickButton(e)}>
  	함수를 호출하는 버튼
  </button>
  
  // case2
  <button type="button" onClick={handleClickButton}>
  	함수 그 잡채 버튼
  </button>
  
  // case3
  const f = (a) => (b) => a + b;
  const a = [1, 2, 3].map((el) => f(1)(el));
  console.log(a);
  
  const b = [1, 2, 3].map(f(1));
  console.log(b);

  이벤트 리스너: 이벤트가 발생했을때 그 처리를 담당하는 함수, 이벤트 핸들러라고도 함

☑️ 참조

https://jobcoding.tistory.com/105