728x90 300x250 SMALL 2024/1125 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. React 생명주기(Lifecycle) 이해하기 React에서 컴포넌트는 마치 사람처럼 "태어나고", "변하고", "떠나는" 과정이 있다.리액트에서는 이 과정을 생명주기라고 부르며,React의 컴포넌트 생명주기는 크게 세 단계로 나뉜다. 1. Mount(태어남) - 컴포넌트가 화면에 나타나는 단계2. Update(변화함) - 컴포넌트의 상태(state)나 속성(props)이 변할 때 업데이트되는 단계3. unMount(떠남) - 컴포넌트가 화면에서 사라질 때 각 단계에서 특정메서드가 호출되며, 이 메서드들을 통해 컴포넌트가 생명주기의 각 단계에서 어떻게 동작할지 정의할 수 있다. 이제 각 단계에 대해서 자세히 말아보자 1. 마운트(Mount)React컴포넌트가 처음 만들어져서 화면에 나타나는 단계에다.예시: 쇼핑몰 메인페이지에서 상품 목록을 처음 불러.. 2024. 11. 23. 이전 1 2 3 4 5 ··· 7 다음 728x90 반응형 LIST