분류 전체보기23 배열을 렌더링할때 key를 써야하는 이유 성능 향상: 리액트는 Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상시킵니다. 배열 요소를 렌더링할 때 키를 제공하면 리액트는 이를 사용하여 각 요소를 식별하고 변경 사항을 효율적으로 파악할 수 있습니다. 이렇게 하면 리액트가 불필요한 DOM 조작을 최소화하여 성능을 향상시킬 수 있습니다. 고유성 보장: 배열의 각 요소에 고유한 키를 제공하면 리액트는 요소의 고유성을 보장할 수 있습니다. 키를 통해 리액트는 각 요소를 식별하고 관련 데이터와 함께 관리할 수 있습니다. 이는 업데이트와 삭제 작업을 효율적으로 수행하는 데 도움이 됩니다. 컴포넌트 재사용성: 키를 사용하여 배열을 렌더링하면 동일한 컴포넌트가 여러 번 재사용될 수 있습니다. 키를 제공하지 않으면 리액트는 기본적으로 배.. 2024. 2. 11. Virtual DOM 리액트(React)는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, Virtual DOM은 리액트의 핵심 개념 중 하나입니다. Virtual DOM은 실제 DOM(Document Object Model)의 가벼운 복사본입니다. 리액트는 컴포넌트의 상태(State)가 변경될 때마다 Virtual DOM을 업데이트하고, 이후에 이를 실제 DOM에 반영합니다. 이 과정은 다음과 같은 방식으로 이루어집니다. 상태(State) 변경: 사용자 상호작용 또는 다른 이벤트에 의해 컴포넌트의 상태가 변경됩니다. Virtual DOM 업데이트: 변경된 상태에 따라 Virtual DOM이 업데이트됩니다. 이는 메모리 상에서만 일어나며, 실제 DOM에는 영향을 주지 않습니다. 가상 DOM 비교: 이전 상태와 새로.. 2024. 2. 3. 코드의 실행 순서 // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); let num = 1;: num 변수를 1로 초기화합니다. setTimeout(() => { num = 2; }, 0);: 이 부분은 비동기로 실행됩니다. setTimeout 함수의 콜백은 이벤트 루프에서 최소 지연 시간 이후에 실행되므로, 현재 코드의 실행 흐름이 지연됩니다. 하지만 이 지연이 0으로 설정되었기 때문에 실제로는 다음 틱에서 실행됩니다. num = 3;: num 변수를 3으로 변경합니다. 이 부분은 setTimeout의 콜백보다 먼저 실행됩니다. console.log(num);: num 변수의 현재 값인 3이 출력.. 2024. 2. 3. HTTP 메소드 HTTP(하이퍼텍스트 전송 프로토콜)는 클라이언트와 서버 간에 데이터를 전송하는 데 사용되는 프로토콜입니다. HTTP는 다양한 메소드(method)를 제공하여 클라이언트가 서버에게 요청을 보내는 방법을 정의합니다. 이 중 가장 널리 사용되는 메소드는 다음과 같습니다. GET: 서버로부터 특정 리소스(일반적으로 HTML 문서나 이미지 등)를 요청합니다. GET 요청은 서버에서 데이터를 읽을 때 사용됩니다. 이 메소드는 요청한 리소스를 변경하지 않습니다. POST: 서버에 새로운 데이터를 제출합니다. POST 요청은 주로 서버의 상태를 변경하는 데 사용됩니다. 예를 들어, 웹 양식의 데이터를 서버에 제출할 때 사용됩니다. PUT: 서버에 새로운 리소스를 생성하거나 기존 리소스를 업데이트합니다. PUT 요청은.. 2024. 1. 28. 이전 1 2 3 4 5 6 다음