[React] ES6의 화살표 함수(arrow function)

📍 화살표 함수(arrow function)

() =>  

• ES6 문법에서 함수를 표현하는 새로운 방식
• 기존 function을 이용한 함수 선언 방식을 아예 대체하지는 않음
• 주로 함수를 파라미터로 전달할 때 유용
• 값을 연산해 바로 반환해야 할 때 사용하면 가독성을 높일 수 있음

❓🤔 기존 function을 대체할 수 없는 이유는?
화살표 함수는 함수를 파라미터로 전달하는 용도이고, 서로 가리키고 있는 this 값이 다르기 때문!

---

• 예시

const MyComponent = () => {
    function BlackDog() {
        this.name = '흰둥이';
        return {
          name: '검둥이',
          bark: function() {
            console.log(this.name + ': 멍멍!');
          }
        }
      }
       
      const blackDog = new BlackDog();
      blackDog.bark(); // 검둥이: 멍멍!
       
      function WhiteDog() {
        this.name = '흰둥이';
        return {
          name: '검둥이',
          bark: () => {
            console.log(this.name + ': 멍멍!');
          }
        }
      }
       
      const whiteDog = new WhiteDog();
      whiteDog.bark(); // 흰둥이: 멍멍!
}

export default MyComponent
 
}

✔ function()을 사용했을 때
👉 검둥이

✔ ( ) =>를 사용했을 때
👉 흰둥이

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리키기 때문!

화살표 함수는 값을 연산해서 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.

// 따로 { }를 열어 주지 않으면 연산한 값을 그대로 반환한다는 의미
function twice(value) {
  return value * 2;
}
 
const triple = (value) => value * 3;