리액트 공부하기 - 화살표 함수

뭐든 기초가 제일 중요한 법.

그걸 알면서도. . 인간은 같은 실수를 반복하지.

아무튼 화살표 함수 다시 공부 시땅 !

 

그래.. 간결하게 쓰는 거 좋은 거 알겠는데,

눈에 익지 않아서 원..

 

여러개 연습해보고 갑시다.

 

몇번 연습해보면 눈에 익을 겁니다

const 함수명 = (인자) => {}

---

일반 함수를, 화살표 함수로 바꾸세요.

 

🕊️[Quiz 1]

function sayHi() {
  console.log("Hi!");
}

 ↓↓↓↓

const sayHi = () => {
  console.log("Hi!");
};

 

 

 

🕊️[Quiz 2]

function square(x) {
  return x * x;
}

 ↓↓↓↓

const square = (x) => {
  return x * x;
};

 

 

🕊️[Quiz 3]

function greet(name) {
  return `Hello, ${name}!`;
}

 ↓↓↓↓

const greet = (name) => {return `Hello, ${name}!`};

 

 

🕊️[Quiz 4] 객체가 리턴 되는 것 주의

function getUserInfo(user) {
  return {
    name: user.name,
    age: user.age
  };
}

↓↓↓↓
나는 오답을 냈었다. 객체가 리턴 되어야 하니까, 우선()감싸야 한다. 정답부터 알아보자.

const getUserInfo = (user) => ({
  name: user.name,
  age: user.age
});

 

내가 썼던 내용은? 

const getUserInfo = (user) => {
  name: user.name,
  age: user.age
};

이건 자바스크립트가 이렇게 생각한다.

“어? 중괄호 {} 있네? → 아~ 이건 함수의 본문(block)이구나.”

객체가 아니라, 잘못된 문장 두 개"처럼 보이게 된다.

 

 

 

그래서 객체를 리턴하고 싶으면,
"나 이거 객체 리턴할 거야~!" 하고 표시해줘야 한다 →소괄호 ()로 감싸기

 

// 함수 본문이 있는 경우
const sayHi = () => {
  console.log("Hi!");
};

// 객체를 바로 리턴하는 경우
const getUser = () => ({
  name: "Jane",
  hobby: "coding"
});

 

 

[배열파트 -map]

const numbers = [1, 2, 3];

const doubled = numbers.map((n) => n * 2);
console.log(doubled); // 👉 [2, 4, 6]

여기서 (n) => n * 2 이게 화살표 함수야!
배열 안의 각 n에 대해 n * 2를 한 결과를 리턴해.

 

 

 

[배열파트 -filter]

const numbers = [1, 2, 3, 4, 5];

const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // 👉 [2, 4]

❗ 조건에 맞는 값만 뽑고 싶을 때 자주 써!

---

내가 실수했던 파트 ! 이중함수, 그리고 return

function sumArray(numbers) {
  return numbers.reduce(function (acc, curr) {
    return acc + curr;
  }, 0);
}

해당 기본 함수를 화살표 함수로 바꾸면, 

const sumArray = (numbers) => {
  return numbers.reduce((acc, curr) => {
    return acc + curr;
  });
};

이렇게 return 도 같이 써야 한다.

 

 → 모든 함수에 return이 필요한 게 아니고,  👉 “값을 리턴해야 할 때만 return을 써!”

 

💡 예시 1: 값을 리턴하지 않는 함수 (단순 실행용)

const sayHi = () => {
  console.log("Hi!");
};

 

"return"이 필요한 경우 (값을 리턴해야 하는 함수를 쓸 때)

 중괄호 {}를 썼을 때

(numbers) => {
  return numbers.reduce(...); // ✔️ 여긴 return 필요
}

 

"return"이 필요 없는 경우

중괄호 없이 한 줄로 작성할 때

const sumArray = (numbers) => numbers.reduce((acc, curr) => acc + curr);

---