728x90 300x250 SMALL Front-end312 클릭 이벤트 클래스형 컴포넌트, 클래스 필드 문법, 함수 컴포넌트 - 비공개 보호되어 있는 글 입니다. 2024. 12. 28. 클래스형 컴포넌트와 클래스 필드 문법 클래스형 컴포넌트아래 예제는 버튼을 클릭하면 숫자를 증가시키는 기능을 제공한다.import React, { Component } from "react";class Counter extends Component { constructor(props) { super(props); this.state = { count: 0, }; } handleIncrement() { this.setState((prevState) => ({ count: prevState.count + 1, })); } render() { return ( Count: {this.state.count} Increment ); }}exp.. 2024. 12. 27. 리액트에서 Arguments (매개변수) 전달하기 함수에서 전달할 데이터를 Arguments라고 하며 리액트에서 파라미터(parameter)와 매개변수(argument)는 함수 정의와 호출에서 동일한 개념을 다룬다. 리액트에서 Arguments 전달하기는 주로 컴포넌트 간 데이터 전달, 이벤트 핸들러에 인자 전달, 또는 함수 호출 시 인자를 넘길 때 사용된다. 리액트는 props를 통해 부모 컴포넌트에 자식 컴포넌트로 데이터를 전달하는 구조를 가지고 있지만, 이벤트 핸들러에 인자를 전달하거나, 함수를 호출할 때 인자를 전달하는 방식도 자주 사용된다. 1. Props를 통한 컴포넌트 간 데이터 전달리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 기본 방법이다. 부모 컴포넌트에서 데이터를 전달하고, 자식 컴포넌트에서 이를 받을 수.. 2024. 12. 26. 함수형 컴포넌트에서 이벤트 핸들러 정의하기 함수형 컴포넌트 내부에서 이벤트 핸들러를(특정 이벤트가 발생했을 때 실행되는 함수) 지정하는 방법에는 두 가지 주요 방법이 있다함수 안에 또 다른 함수로 정의하는 방법화살표 함수(arrow function)을 사용하는 방법두 방법은 이벤트 핸들러를 정의하는 방식에서 차이가 있으며, 각각의 방식에 따라 this바인딩 및 성능에 영향을 줄 수 있다. 1. 함수 안에 또 다른 함수로 정의하는 방법이 방식에서는 이벤트 핸들러를 별도의 함수로 정의하고, 그 함수 안에서 이벤트를 처리하는 방식이다.import React from "react";function DynamicHandler() { function handleClick(action) { // 동적으로 내부 함수를 생성 function gree.. 2024. 12. 25. 이전 1 ··· 6 7 8 9 10 11 12 ··· 78 다음 728x90 반응형 LIST