각도기(Lv.0)( return문과 중괄호는 한세트다)

 

 

<문제 설명>

 

각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.

• 예각 : 0 < angle < 90
• 직각 : angle = 90
• 둔각 : 90 < angle < 180
• 평각 : angle = 180

---

제한사항

• 0 < angle ≤ 180
• angle은 정수입니다.

---

<처음 제출 답안>

const solution = (angle) => {
    if(angle < 90) { return 1}
    else if(angle == 90) {return 2}
    else if(angle > 90 && angle < 180) {return 3}
    else(angle == 180) {return 4}
}

 

-> else에는 조건문을 달아주면 모든 조건문에 오류가 발생되어 출력자체가 안된다.

-> const 함수명 = () => {}을 함수로 선언 했더라도 각 조건문에 대한 return문은 생략이 안됨.

 

---

결론: 화살표 함수에서 중괄호를 뒤에 쓰면 return문을 써야되고, 중괄호를 뒤에 안썻다면 return문 없이 사용 가능

 

 

살표 함수의 기본 구문은

( ) => { } 이다. 그리고 { } 안에 return문을 넣을 수 있다.

 

그리고 만일  중괄호를 빼면

( ) => ____  이런 형식인데 이건  ( ) => { return expression }  과 같은 의미이다. 해당 내용은 MDN에 모두 있다. 그리고 중괄호를 생략한 화살표 함수를 React에 적용해본 것이 아래의 코드이다.

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

신박한가? 잘 보지 못한 느낌일 것이다. 

 

그런데 MDN에 의하면 매개변수(parameter)가 없는 함수라면 중괄호가 필요하다고 한다.  그래서 위의 코드는 매개변수가 없는 함수이기 때문에 아래의 코드처럼 중괄호만을 넣어 봤더니 렌더링 에러가 발생했다. 당연히 오류인게 화살표 함수에서 중괄호 안에는 return 문이 들어가야 하기 때문이다.

화살표 함수의 기본구문 대로 매개변수가 없어서 중괄호를 넣었더니 랜더링 에러 발생하였다.

const Counter = () => {
    <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>; 
    };

 

정리하면

"React에서 화살표 함수를 기재할 때 ( ) => ____  형식으로 기재하면 return은 빼되 된다. 그러나 중괄호를 기재한다면 중괄호 안에 return문을 꼭 써줘야 하고 return 문 뒤에 소괄호를 넣으면 return 다음 행에 최상위 엘리먼트를 기재하고 retun 뒤에 소괄호를 뺀다면 return과 같은 행에 최상위 엘리먼트를 기재해야 한다는 것이다.

 

출처:https://jobcoding.tistory.com/105

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