728x90 300x250 SMALL 분류 전체보기1117 함수형 컴포넌트에서 이벤트 핸들러 정의하기 함수형 컴포넌트 내부에서 이벤트 핸들러를(특정 이벤트가 발생했을 때 실행되는 함수) 지정하는 방법에는 두 가지 주요 방법이 있다함수 안에 또 다른 함수로 정의하는 방법화살표 함수(arrow function)을 사용하는 방법두 방법은 이벤트 핸들러를 정의하는 방식에서 차이가 있으며, 각각의 방식에 따라 this바인딩 및 성능에 영향을 줄 수 있다. 1. 함수 안에 또 다른 함수로 정의하는 방법이 방식에서는 이벤트 핸들러를 별도의 함수로 정의하고, 그 함수 안에서 이벤트를 처리하는 방식이다.import React from "react";function DynamicHandler() { function handleClick(action) { // 동적으로 내부 함수를 생성 function gree.. 2024. 12. 25. 클래스 필드 문법, bind 사용, 함수형 컴포넌트 비교하기 같은 예제를 가지고 클래스 컴포넌트에서 bind 사용 방식과, 클래스 필드 문법 사용, 함수형 컴포넌트 사용 방식을 비교해 보자 1. 클래스 컴포넌트 - 생성자에 bind 사용import React, { Component } from 'react';class MyComponent extends Component { constructor(props) { super(props); // 생성자에서 bind로 this 바인딩 this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); // bind로 this를 바인딩 } handleClick() { this.setState({ count: this.stat.. 2024. 12. 24. 클래스 필드 문법과 화살표 함수의 차이 클래스 필드 문법에서 메서드를 정의할 때, 내부적으로 화살표 함수와 유사하게 동작하지만, 둘 사이에는 약간의 차이가 있다. 1. 정의 위치화살표 함수는 클래스 내부 메서드로 정의되더라도, 명시적으로 선언된 함수 이다.클래스 필드 문법은 메서드를 클래스의 속성으로 정의한다.예시 : 화살표 함수class MyComponent extends React.Component { constructor(props) { super(props); this.handleClick = () => { console.log(this.state.count); // 화살표 함수는 this가 자동 고정 }; }} 예시 : 클래스 필드 문법class MyComponent extends React.Compone.. 2024. 12. 23. 클래스 필드 문법이란? 클래스 필드 문법(Class Fields Syntax)ES6 이후 추가된 JavaScript의 문법으로, 클래스 안에서 속성이나 메서드를 정의할 때 사용하는 방식이다.기존 방식보다 간결하고 직관적으로 작성할 수 있다. 클래스 필드 문법 예시class MyComponent extends React.Component { // 클래스 필드 문법으로 속성 정의 state = { count: 0, }; // 클래스 필드 문법으로 메서드 정의 handleClick = () => { console.log(this.state.count); }; render() { return Click Me; }} 클래스 필드 문법의 특징1. 문법 간소화기존 방식에서는 constructor를 사용해 st.. 2024. 12. 22. 이전 1 ··· 10 11 12 13 14 15 16 ··· 280 다음 728x90 반응형 LIST