React Key를 왜 사용해야할까 ??Key는 리액트가 어떤 항목이 변경, 추가 또는 제거되었는지를 식별할때 사용합니다.key가 없다면, 리액트는 DOM 요소를 효율적으로 업데이트하는 데 어려움을 겪을 수 있습니다. 1. 효율적인 업데이트 : 리액트는 키 를 통해 어떤 항목이 변경, 추가, 제거되었는지를 알 수 있다고 설명드렸습니다.이를 통해 최소한 DOM 조작으로 필요한 부분만 업데이트할 수 있어 성능을 최적화 할 수 있습니다. 2. 컴포넌트 상태 유지 : 키는 컴포넌트의 고유 식별자로 작동하여, 컴포넌트의 상태가 올바르게 유지되도록 도와줍니다.만약 키가 없다면 리액트는 컴포넌트의 상태를 잘못 유지할 수 있습니다. 3. 일관된 렌더링 : 키가 설정되어 있지 않으면 리액트는 배열의 항목들이 어떻게 변했..

React 생명주기더보기https://ko.legacy.reactjs.org/docs/react-component.html#the-component-lifecycle리액트 컴포넌트가 생성, 업데이트, 소멸되는 일련의 과정을 말합니다.리액트 컴포넌트는 크게 세 가지 단계로 구분됩니다.마운팅, 업데이트, 언마운팅각 단계에서 특정한 메서드가 호출됩니다.  1.마운팅마운팅 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생합니다. 이 단계에서 호출되는 주요 메서드가 존재합니다. - constructor() : 컴포넌트가 생성될 때 호출되며, state를 초기화하고 메서드를 바인딩하는 데 사용됩니다. - static getDerivedStateFromProps(props, state) : props에서 state를..

React Components ?리액트에서 컴포너트는 사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드블록을 의미합니다.컴포넌트는 상태와, 속성을 가지고 있고, 이를 통해서 데이터를 관리하고 UI를 렌더링 합니다. 1. 함수형 컴포넌트(Functional Components)함수형 컴포넌트는 단순하게 자바스크립트 함수로 정의합니다.입력으로 속성을 받고 JSX를 반환하여 UI를 렌더링 합니다.16.8버전 훅의 도입으로 합수형 컴포넌트에서도 상태, 라이프사이클 메서디를 사용할 수 있습니다. import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( ..

React Virtual DOM ?React의 Virtual DOM(가상 DOM)은 리액트의 성능을 최적화하는 핵심 기술입니다.가상 DOM은 실제 DOM의 경량화된 사본으로, 리액트는 효울적인 업데이트를 수행합니다. 동작 원리 !1. 초기 렌더링- 리액트 컴포넌트가 처음으로 렌더링할 때, 가상 DOM 트리가 생성됩니다.  2. 상태 변경- 컴포넌트의 상태가 속성이 변경되면 리액트는 새로운 가상 DOM 트리가 생성이 됩니다.이 새로운 가상 DOM 트리는 변경된 상태를 반영합니다. 3. Diffing 알고리즘- 액트는 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교(diffing)하여 변경된 부분을 찾아냅니다.diffing 알고리즘은 최소한의 연산으로 두 트리의 차이점을 효율적으로 계산합니다. 4...

React 렌더링 방식리액트는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 DOM결과를 브라우저에 제공하는 과정 ● 가상 DOM (Vitual DOM)리액트의 특징 중 하나는 가상 DOM 입니다. - 렌더링 과정1. 컴포넌트의 상태, 속성이 변경되면 리액트는 가상 DOM을 업데이트 합니다.2. 가상 DOM 업데이트 내용과 이전 D가상 DOM을 비교합니다.3. 변경 된 DOM을 실제 DOM에 적용 하여 성능을 최적화 시킵니다.  ●재조정 (Reconciliation)가상 DOM과 실제DOM의 차이를 비교하여 변경사항을 실제 DOM에 반영하는 과정을 재조정이라고 합니다.이 과정을 통해서 불필요한 DOM 조작을 최소화, 앱 성능을 향상 시켜줍니다.  ● 일방향 데이터 흐름리액트는 데이터가 한..