728x90 300x250 리액트3 함수형 컴포넌트에서 이벤트 핸들러 정의하기 함수형 컴포넌트 내부에서 이벤트 핸들러를(특정 이벤트가 발생했을 때 실행되는 함수) 지정하는 방법에는 두 가지 주요 방법이 있다함수 안에 또 다른 함수로 정의하는 방법화살표 함수(arrow function)을 사용하는 방법두 방법은 이벤트 핸들러를 정의하는 방식에서 차이가 있으며, 각각의 방식에 따라 this바인딩 및 성능에 영향을 줄 수 있다. 1. 함수 안에 또 다른 함수로 정의하는 방법이 방식에서는 이벤트 핸들러를 별도의 함수로 정의하고, 그 함수 안에서 이벤트를 처리하는 방식이다.import React from "react";function DynamicHandler() { function handleClick(action) { // 동적으로 내부 함수를 생성 function gree.. 2024. 12. 25. React 생명주기(Lifecycle) 이해하기 React에서 컴포넌트는 마치 사람처럼 "태어나고", "변하고", "떠나는" 과정이 있다.리액트에서는 이 과정을 생명주기라고 부르며,React의 컴포넌트 생명주기는 크게 세 단계로 나뉜다. 1. Mount(태어남) - 컴포넌트가 화면에 나타나는 단계2. Update(변화함) - 컴포넌트의 상태(state)나 속성(props)이 변할 때 업데이트되는 단계3. unMount(떠남) - 컴포넌트가 화면에서 사라질 때 각 단계에서 특정메서드가 호출되며, 이 메서드들을 통해 컴포넌트가 생명주기의 각 단계에서 어떻게 동작할지 정의할 수 있다. 이제 각 단계에 대해서 자세히 말아보자 1. 마운트(Mount)React컴포넌트가 처음 만들어져서 화면에 나타나는 단계에다.예시: 쇼핑몰 메인페이지에서 상품 목록을 처음 불러.. 2024. 11. 23. 리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유 리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유는 각각의 방식이 개발의 필요와 발전에 따라 다른 장점과 사용성을 제공하기 때문이다. 1. 초기 리액트 : 클래스형 컴포넌트의 등장리액트가 처음 등장했을 때, 컴포넌트의 상태 관리와 생명주기 메서드 등을 사용하려면 클래스형 컴포넌트를 사용해야 했다. 당시 함수형 컴포넌트는 단순히 UI를 반환하는 역할만 할 수 있었다.그래서 클래스형 컴포넌트가 리액트에서 기본으로 많이 사용되었고, 상태 관리와 복잡한 로직이 필요한 컴포넌트는 클래스로 작성되었다. class MyComponent extends React.Component { constructor(props) { super(props); this.state = {.. 2024. 11. 16. 이전 1 다음 728x90 반응형