728x90 300x250 SMALL 2024/1125 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. 클래스 컴포넌트에서 constructor 생성자 constructor(props)는 클래스 컴포넌트에서 초기 설정을 할 때 사용하는 생성자 함수이다.리액트의 클래스 컴포넌트에서는 Component클래스를 상속받기 때문에 constructor를 작성할 때 super(props)를 호출해서 부모 클래스의 생성자를 초기화해주어야 한다. 생성자 함수가 없어도 되는 경우만약 컴포넌트가 state를 초기화하거나, props를 초기 설정할 필요가 없다면 constructor를 생략가능하다.생성자 없이 컴포넌트를 선언하면 리액트가 내부적으로 Componet의 기본 생성자를 자동으로 호출한다.그래서 constructon를 생략해도 컴포넌트가 정상적으로 작동할 수 있다.예를들어 constructor 없이도 다음과 같이 state를 초기화할 수 있다.class Count.. 2024. 11. 20. React Developer Tools 설치 React Developer Tools은 React 애플리케이션을 디버깅하고 최적화하는 데 도움이 되는 브라우저 확장도구 이다.Chrom과 Firfox에서 사용할 수 있고, React 컴포넌트의 구조와 상태를 확인하거나, 상태 변화와 렌더링 성능등을 분석할 수 있는 기능을 제공한다. 설치방법1. 검색창에 React Developer Tools를 검색 2. 해당하는 브라우저 링크 클릭 3. 웹스토어 확장 프로그램으로 넘어가는데 Add to Chrome를 눌러 추가 한다. 설치를 하면 개발자 도구 오른쪽 끝에 Components와 Profiler 탭이 나타나고 이를 통해 각 컴포넌트의 구조와 상태를 확인할 수 있다. 2024. 11. 19. 이전 1 2 3 4 5 6 7 다음 728x90 반응형 LIST