728x90 300x250 SMALL Front-end312 리액트 생명주기 클래스형과 함수형 비교해보기 클래스형 컴포넌트 버전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. React의 컴포넌트와 Prop 개념 잡기 React의 컴포넌트와 Prop을 사용해서 사용자 이름을 받아서 화면에 출력하는 간단한 함수형 컴포넌트 예제를 만들어 보자 1. 파일구조/src App.js HelloUser.js 2. HelloUwer.jsimport React from 'react';function HelloUser(props) { return ( Hello, {props.name}! Welcome to the React world! );}export default HelloUser; 부모로 부터 props를 받아서 props.name을 출력한다. 3. App.jsimport React from 'react';import HelloUser from './HelloUser';function App.. 2024. 11. 21. 이전 1 ··· 14 15 16 17 18 19 20 ··· 78 다음 728x90 반응형 LIST