728x90 300x250 SMALL Front-end312 useEffect : 리액트 훅 사용법 useEffect는 함수형 컴포넌트에서 side effect(부수 효과)를 처리하기 위한 React 훅이다.리액트에서의 사이드 이펙트란 컴포넌트의 렌더링 외부에서 발생하는 작업들을 의미한다.예를 들면 서버에서 데이터 가져오기, 구독 설정, 타이머 설정, 수동으로 DOM 조작하기 등이 있다.이 작업들은 다른 컴포넌트에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료 될 수 없다.렌더링이 끝난 이후 실행되어야 하는 작업이다.클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 리사이프사이클 메서드를 사용해서 처리 했지만 함수형 컴포넌트에서는 useEffect()훅만으로 동일한 기능을 처리할 수 있다. useEffect의 기본.. 2024. 11. 28. 클래스 컴포넌트와 함수형 컴포넌트에서의 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. 이전 1 ··· 13 14 15 16 17 18 19 ··· 78 다음 728x90 반응형 LIST