[TIL][04.02] Arrow Function, Component, Props, Event Handling

ES6 화살표 함수 (Arrow Function)

ES6에서 도입된 화살표 함수는 기존 함수와 바인딩 방식에서 차이가 있다. this를 자동으로 바인딩하여 클래스 내부에서 bind(this)를 사용할 필요가 없음

 

React 컴포넌트

• React에서 UI를 구성하는 독립적이고 재사용 가능한 코드 블록
• 컴포넌트는 HTML, CSS, JavaScript를 조합하여 화면을 구성하는 역할을 함
• 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 방식으로 정의할 수 있음

함수형 컴포넌트

• 간결하고 직관적인 형태로 작성 가능
• useState, useEffect와 같은 React Hook을 활용하여 상태 및 생명주기 관리 가능

const MyComponent = ({ name }) => { return <div>Hello, {name}!</div>; };

클래스형 컴포넌트

• this.state와 this.setState를 사용하여 상태 관리
• 생명주기 메서드 (componentDidMount, componentDidUpdate 등)를 활용 가능
• React 16.8 이후 Hook이 도입되면서 함수형 컴포넌트가 더 선호됨

class MyComponent extends React.Component { render() { return <div>Hello, {this.props.name}!</div>; } }

 

 

Props (프롭스)

• props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용됨
• 함수형 컴포넌트에서는 MyComponent.defaultProps 방식이 지원되지 않음

Props 기본값 설정 방법

1. 논리 연산자(||)를 이용한 기본값 설정
   • props.name이 존재하면 해당 값을 출력하고, undefined 또는 null이라면 "기본값"을 출력함
   • 단점: 0과 같은 falsy한 값도 "기본값"으로 대체될 수 있음.

const MyComponent = (props) => { return <div>{props.name || "기본값"}</div>; };

2. 비구조화 할당(Destructuring)과 기본값 설정
   • { name = "기본값" }을 통해 props.name이 undefined일 경우 "기본값"을 자동으로 할당.
   • null은 기본값으로 대체되지 않음.
   • 0, false 같은 값도 정상적으로 전달됨.
   • 가독성이 좋고 안정적인 방법으로 추천됨.

const MyComponent = ({ name = "기본값" }) => { return <div>{name}</div>; };

 

PropTypes

• 현재 React에서는 PropTypes를 기본적으로 지원하지 않음
• 타입 검증이 필요하면 TypeScript를 사용하는 것이 일반적임

 

이벤트 핸들링: 버튼 클릭 시 2 더하기

클래스형 컴포넌트 (객체 방식)

• setState는 비동기 방식이므로 동일한 값을 두 번 호출해도 즉시 반영되지 않음

<button
  onClick={() => {
    this.setState({ number: number + 1 }, () => {});
    this.setState({ number: this.state.number + 1 });
  }}
>
  +1
</button>

• 따라서, number가 0이었다면, 첫 번째 setState는 1을 설정하지만 반영 전이므로, 두 번째 setState는 여전히 0 + 1로 계산됨.
• 결국, 두 번째 setState가 첫 번째 setState를 덮어쓰게 됨.

함수형 컴포넌트 방식

• 함수형 컴포넌트에서는 useState를 사용할 경우, 상태 업데이트가 동기적으로 처리될 수 있음

<button
  onClick={() => {
    this.setState((prevState) => {
      return {
        number: prevState.number + 1,
      };
    });
    this.setState((prevState) => ({
      number: prevState.number + 1,
    }));
  }}
>
  +1
</button>

• 첫 번째 setState에서 prevState.number를 가져와서 +1 증가. 두 번째 setState에서 이전 setState가 적용된 이후의 값을 가져와서 다시 +1 증가

 

클래스 vs 함수형 컴포넌트의 바인딩 차이

클래스형 컴포넌트

• 클래스 내부의 메서드는 기본적으로 this에 바인딩되지 않으므로, bind(this)가 필요함

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        console.log("Clicked");
    }
    render() {
        return <button onClick={this.handleClick}>클릭</button>;
    }
}

함수형 컴포넌트

• 화살표 함수 사용 시 자동으로 this 바인딩이 됨

const MyComponent = () => {
    const handleClick = () => {
        console.log("Clicked");
    };
    return <button onClick={handleClick}>클릭</button>;
};