728x90 300x250 SMALL Front-end/React65 리액트 훅(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. State: React에서 상태 관리의 기본 개념 리액트에서 state는 컴포넌트의 동적인 데이터를 관리하는 개체이다.state는 사용자와의 상호작용이나 특정 이벤트에 따라 변할 수 있는 값들을 저장하고, 이를 통해 UI를 업데이트하는 중요한 요소이다. state의 주요 특징1. 동적 데이터 관리state는 사용자가 입력한 값이나 클릭한 버튼 등에 따라 값이 변할 수 있는데이터이다.예를 들어, 좋아요 버튼을 누를 때마다 숫자가 올라가는 상황을 생각해 보면, 이 숫자는 계속 바뀌어야 하는 동적 데이터이므로 state에 저장한다.2. 컴포넌트 내에서 선언 및 관리state는 컴포넌트 내부에서 선언되고, 그 컴포넌트 내에서만 직접 수정이 가능하다.컴포넌트가 생성될 때 state가 초기화되고, 컴포넌트가 다시 렌더링될 때마다 상태 값에 따라 UI가 업데이트 된.. 2024. 11. 22. 이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음 728x90 반응형 LIST