React4 생명 주기 React 클래스 컴포넌트의 생명주기는 컴포넌트의 생성부터 소멸까지 여러 단계를 거치며, 각 단계에 따라 특정한 메서드가 호출됩니다. 이러한 메서드들을 생명주기 메서드라고 하며, 컴포넌트의 생명주기를 효과적으로 관리할 수 있게 해줍니다. 1. 마운팅(Mounting) 2024. 2. 20. Component React에서 컴포넌트는 UI의 독립적이고 재사용 가능한 부분을 구성하는 핵심 단위입니다 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다 Props: 컴포넌트에 전달되는 입력 값으로, 부모 컴포넌트로부터 받은 데이터입니다. Props는 읽기 전용이며, 컴포넌트 내부에서 수정할 수 없습니다. State: 컴포넌트의 상태를 나타내는 데이터로, 컴포넌트 내부에서 관리됩니다. 상태가 변경되면, 컴포넌트는 자동으로 다시 렌더링됩니다. 생명주기 메서드: 클래스 컴포넌트에서 사용할 수 있는 메서드로, 컴포넌트의 생성부터 소멸까지 다양한 시점에 특정 작업을 수행할 수 있게 해줍니다. 예를 들어, componentDidMount는 컴포넌트가 마운트된 후 실행되는 메서드입니다. 1. 함수형 컴포넌트(Functional.. 2024. 2. 20. 기본 개념 Props : Component에 전달하는 Data로 Component 구성을 가능하게 해주며, 부모-자식 Component 간 Data를 연결해준다. State : Component 내부의 Data를 뜻한다. Context : 앱을 구성하는 전체 Component의 Data를 뜻한다. Component : 위 기능들의 집합인 Function이다. DOM : 웹 사이트를 열 때, 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현한다는 것이다 VDOM(Virtual DOM) : 상태 변경은 VDOM에 먼저 적용 그후 DOM에 적용. 하지만 VDOM을 업데이트한다고 해서 반드시 실제 DOM의 업데이트가 트리거 되는 것은 아님. 1. 컴포넌트 기반 아키텍처 React는 UI를 독립적이고 재사용 가능한.. 2024. 2. 20. React-DOM React-DOM은 가상 DOM의 변화를 실제 DOM에 반영하기 위한 라이브러리입니다. 변화가 필요한 부분만을 효율적으로 업데이트함으로써, 성능을 최적화합니다. 코드를 수정할 때 REACT-DOM의 흐름을 간단하게 소개하면 아래와 같습니다. REACT -> Virtual DOM -> React DOM-> DOM ->UI React의 핵심적인 작동 메커니즘은 가상 DOM 재조정(Reconciliation) 과정 DOM과의 효율적인 상호작용 에 있습니다. 1. React Component Tree React 애플리케이션은 컴포넌트로 이루어진 트리 구조입니다. 이 트리는 애플리케이션의 구조를 정의합니다. 2. 가상 DOM (React-DOM과 같은 뜻 아님.) 가상 DOM은 실제 DOM을 추상화한 메모리 내의.. 2024. 2. 20. 이전 1 다음
