728x90 300x250 SMALL 티스토리챌린지19 클래스 컴포넌트와 함수형 컴포넌트에서의 useState() 비교 클래스 컴포넌트에서 setSTate()함수를 호출해서 state가 업데이트되고 컴포넌트가 재렌더링 되는 과정은 동일하지만 업데이트 방식의 차이가 존재한다. 클래스컴포넌트에서의 setState()클래스형 컴포넌트에서는 상태를 하나의 객체로 묶어서 관리한다.setState()메서드를 호출할 때, 객체를 전달해서 여러 개의 상태 값을 동시에 업데이트 할 수있다.예를 들어 count와 name을 동시에 업데이트할 때는 다음과 같이 할 수 있다.class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0, name: 'John', }; } increme.. 2024. 11. 27. React 훅 사용법 : useState 함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트의 state 기능을 함수 컴포넌트에서도 사용하려면 useState()훅을 사용해야 한다. state에 대한 설명은 아래 포스팅 참고https://moo-you.tistory.com/1065 State: React에서 상태 관리의 기본 개념리액트에서 state는 컴포넌트의 동적인 데이터를 관리하는 개체이다.state는 사용자와의 상호작용이나 특정 이벤트에 따라 변할 수 있는 값들을 저장하고, 이를 통해 UI를 업데이트하는 중요한 요moo-you.tistory.com useState 사용방법import React, { useState } from 'react';컴포넌트 최상위 레벨에서 사용할 훅( useState )을 impo.. 2024. 11. 26. 리액트 훅(Hooks)란? 리액트 훅(Hooks)은 함수형 컴포넌트에서도 클래스형 컴포넌트 같은 상태 관리와 생명주기등의 로직을 쉽게 사용할 수 있도록 도와주는 기능이다.Hook은 영어로 갈고리라는 뜻을 갖고 있는데 프로그래밍에서는 원래 있는 어떤 기능에 갈고리를 거는 것 처럼 같이 수행되는기능을 의미하며 훅의 이름은 모두 use로 시작한다.이전에는 상태관리나 생명주기 관련 기능을 사용하려면 클래스형 컴포넌트를 사용해야 했다.그러나 리액트 16.8부터 훅이 도입되면서 함수형 컴포넌트에서도 이런 기능을 활용할 수 있게 되었다. 훅을 사용하는 이유1. 간결한 코드클래스형 컴포넌트의 복잡한 구조(생성자, 메서드 바인딩 등)을 피할 수 있다.함수형 컴포넌트에서 상태와 로직을 훨씬 직관적으로 관리 할 수 있다.2. 재사용성 증가훅을 사용하.. 2024. 11. 25. 리액트 생명주기 클래스형과 함수형 비교해보기 클래스형 컴포넌트 버전import React, { Component } from "react";class LifecycleExample extends Component { constructor(props) { super(props); this.state = { count: 0, }; console.log("1. Constructor: 컴포넌트 생성"); } componentDidMount() { console.log("3. componentDidMount: 컴포넌트가 화면에 마운트됨"); } componentDidUpdate(prevProps, prevState) { console.log("4. componentDidUpdate: 컴포넌트가 업데이트됨",.. 2024. 11. 24. 이전 1 2 3 4 5 다음 728x90 반응형 LIST