JS 화살표 함수 복습 및 React 사전 공부

언어 및 도구들 공부/React

JS 화살표 함수 복습 및 React 사전 공부

Dr.Mlem 2024. 11. 17. 22:27

Q1.

리엑트 공부를 준비중에 있는데, 이때 쓸 화살표 함수 표기법에서 준비를 하고 싶어. 예제들을 통해서 익힐 수 있게 준비해서 보여줘.

A1.

리액트(React)를 배우기 전에, 자바스크립트의 **화살표 함수(arrow functions)**를 잘 이해하는 것은 매우 중요합니다. 리액트에서는 컴포넌트 정의나 이벤트 핸들러 등 여러 곳에서 화살표 함수가 자주 사용됩니다. 아래에 화살표 함수의 다양한 예제와 함께 설명을 준비했으니 참고하세요.

1. 기본 문법

화살표 함수는 function 키워드 대신 =>를 사용합니다.

// 일반 함수
function add(a, b) {
    return a + b;
}

// 화살표 함수
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

특징:

매개변수가 하나면 괄호를 생략 가능.
함수 본문이 단일 표현식이라면 중괄호와 return 생략 가능.

2. 매개변수와 반환값

매개변수가 없거나 여러 개인 경우 괄호가 필요합니다.

// 매개변수가 없는 경우
const greet = () => "Hello, World!";
console.log(greet()); // Hello, World!

// 매개변수가 여러 개인 경우
const multiply = (a, b, c) => a * b * c;
console.log(multiply(2, 3, 4)); // 24

3. 중괄호와 return

중괄호를 사용할 경우에는 return을 명시적으로 써야 합니다.

const square = (n) => {
    return n * n;
};
console.log(square(4)); // 16

중괄호를 사용하지 않으면 암시적 반환(implicit return)을 합니다.

const square = (n) => n * n;
console.log(square(4)); // 16

4. this의 바인딩

화살표 함수는 자신만의 this를 가지지 않습니다. 이 특징은 리액트에서 이벤트 핸들러를 작성할 때 유용합니다.

// 일반 함수의 this
function normalFunction() {
    console.log(this);
}

// 화살표 함수의 this
const arrowFunction = () => {
    console.log(this);
};

normalFunction(); // 전역 객체 또는 undefined (엄격 모드)
arrowFunction();  // 부모 컨텍스트의 this

리액트 컴포넌트에서 화살표 함수가 유용한 이유:

class App extends React.Component {
    handleClick = () => {
        console.log(this); // App 클래스의 this
    };

    render() {
        return <button onClick={this.handleClick}>Click Me</button>;
    }
}

5. 응용 예제

(1) 배열 메서드와 함께 사용

화살표 함수는 map, filter, reduce 같은 배열 메서드에서 자주 사용됩니다.

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

// 각 숫자를 제곱
const squares = numbers.map((n) => n * n);
console.log(squares); // [1, 4, 9, 16, 25]

// 짝수만 필터링
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4]

(2) 간단한 컴포넌트 정의

리액트에서 화살표 함수는 함수형 컴포넌트를 간단히 정의하는 데 사용됩니다.

const Welcome = () => <h1>Welcome to React!</h1>;

(3) 이벤트 핸들러

리액트에서 이벤트 핸들러를 정의할 때도 화살표 함수가 자주 등장합니다.

const App = () => {
    const handleClick = () => {
        alert("Button clicked!");
    };

    return <button onClick={handleClick}>Click Me</button>;
};

6. 연습 문제

아래 문제를 풀어보며 익숙해져 보세요.

문제 1: 화살표 함수를 사용해 두 숫자의 차를 구하는 함수를 작성하세요.

문제 2: 배열의 각 요소에 2를 곱해 새로운 배열을 반환하는 화살표 함수를 작성하세요.

문제 3: 리액트 컴포넌트를 화살표 함수로 정의해, 버튼 클릭 시 콘솔에 "Hello!"를 출력하세요.

아래에 정답 예시

// 두 숫자의 차를 구하는 함수
const subtract = (a, b) => a - b;

console.log(subtract(10, 4)); // 6

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

// 각 요소에 2를 곱한 배열 반환
const doubledNumbers = numbers.map((n) => n * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

import React from 'react';

const App = () => {
    // 버튼 클릭 이벤트 핸들러
    const handleClick = () => {
        console.log("Hello!");
    };

    return (
        <div>
            <button onClick={handleClick}>Click Me</button>
        </div>
    );
};

export default App;