아무거나 하는 형

1. key 속성이란 무엇인가React에서 배열이나 리스트(예: 할 일 목록, 댓글 목록 등)를 화면에 보여줄 때 key라는 속성을 꼭 사용해야 한다.key는 각각의 아이템(컴포넌트, 엘리먼트 등)을 고유하게 구분하는 값이다.만약 key를 안 쓰거나 잘못 쓰면, React가 어떤 항목이 변경·추가·삭제됐는지 제대로 알지 못해 화면이 이상하게 동작하거나, 성능이 나빠질 수 있다.2. key가 필요한 이유React의 똑똑한 비교(diffing)React는 Virtual DOM을 사용해 화면이 어떻게 바뀌었는지 스스로 비교한다.이때 key가 있으면 React가 빠르게 바뀐 부분만 찾아서 화면을 최소한만 고친다.(key가 없으면 모든 요소를 처음부터 끝까지 다시 그릴 수도 있다.)컴포넌트의 상태를 올바르게 유지..

1. 메모이제이션과 React 렌더링 이해하기메모이제이션은 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. React에서 이 개념은 리렌더링 과정에서 특히 중요하다.React에서 리렌더링이 발생하는 주요 조건은 다음과 같다:컴포넌트의 state가 변경될 때부모 컴포넌트로부터 새로운 props가 전달될 때부모 컴포넌트가 리렌더링될 때이러한 상황에서 React는 Virtual DOM을 사용하여 변경된 부분만 실제 DOM에 반영하지만, 불필요한 계산이나 함수 재생성이 계속 발생하면 성능 저하로 이어질 수 있다.2. useMemo: 계산 결과의 메모이제이션2-1. 개념과 구조useMemo는 계산 결과를 캐싱하여 불필요한 재계산을 방지하는 ..

1. React 컴포넌트란?컴포넌트는 HTML 요소들을 캡슐화한 일종의 JavaScript 함수이다. 입력값인 props를 받아 React 엘리먼트를 반환하며, 다음과 같은 특징을 가진다:독립적이고 재사용 가능하다.UI를 여러 개의 컴포넌트로 분리함으로써 유지보수와 관리가 쉬워진다.상태(state)와 생명주기(lifecycle)를 통해 동적인 UI 구현이 가능하다.2. 함수형 컴포넌트함수형 컴포넌트는 JavaScript 함수로 정의되며, 가장 간단한 형태의 React 컴포넌트이다.function Welcome(props) { return Hello, {props.name};}React 16.8 이후 도입된 Hook을 통해 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 구현할 수 있게 되었다.impo..

리액트의 가상 DOM이란?리액트의 가상 DOM(Virtual DOM)은 웹 애플리케이션 성능을 최적화하기 위한 핵심 기술이다. 실제 DOM 조작의 비효율성을 해결하고 복잡한 UI 업데이트를 효율적으로 처리하기 위해 도입되었다. 이 글에서는 전통적인 DOM의 한계를 시작으로, 가상 DOM의 작동 방식과 성능 최적화 효과를 구조적으로 정리한다.1. 전통적인 DOM 조작의 한계DOM의 기본 동작DOM(Document Object Model)은 HTML 문서를 트리 구조로 표현한 객체 모델이다. 브라우저는 이 구조를 해석하여 UI를 그리며, JavaScript를 통해 요소를 조작할 수 있다.document.getElementById('counter').textContent = newValue;이러한 단순한 작업..

리액트의 렌더링 방식 정리 리액트(React)는 자바스크립트 기반의 사용자 인터페이스(UI) 라이브러리다.가장 핵심적인 특징 중 하나는 효율적인 렌더링 방식이다. DOM과 Virtual DOMDOM이란? DOM(Document Object Model)은 HTML 요소들을 트리 형태로 구조화한 객체다.브라우저는 이 구조를 기반으로 웹페이지를 그린다. 안녕하세요 클릭 이런 코드는 브라우저에 의해 DOM 트리로 파싱되고, 화면에 표시된다.하지만 DOM 조작은 성능 비용이 크다.요소 하나만 바꿔도 브라우저는 리플로우(Reflow)나 리페인트(Repaint) 같은 작업을 실행한다.Virtual DOM이란? 리액트는 성능 병목을 줄이기 위해 Virtual DOM을 사용한다.이는 실제 DOM의 가벼운 복제본이다...

1. 자료구조란? 데이터를 효율적으로 저장하고 관리하기 위한 구조이다.코딩을 처음에 배울 때는 올바르게 돌아가게 하는 것이 목표이다. 그러나 경험이 쌓이면서 같은 작업을 하는 두 코드 중 한 코드가 더 나을 수 있음을 알게 된다. 유지 보수성이 좋은가(가독성, 조직, 코드 모듈성)와 코드 효율성이 어떤 것이 더 뛰어난가.같은 동작을 하더라도 더 빠른 코드가 있다는 말이다.function printNumberVersionOne() { let number = 2; while (number function printNumberVersionTwo() { let number = 2; while (number 둘 다 number가 짝수면 출력하는 코드이다.첫 번째 버전은 루프를 99번 돌고 끝나지만 두 ..

JavaScript의 연산자의 종류는 다음과 같다. 산술 연산자증감 연산자대입 연산자비교 연산자논리 연산자삼항 연산자Nullish 연산자비트 연산자1. 산술 연산자+ : 덧셈 연산자- : 뺄셈 연산자* : 곱셈 연산자/ : 나눗셈 연산자% : 나머지 연산자** : 지수 연산자+ 연산자는 피연산자에 문자 데이터 타입이 있는 경우, 덧셈이 아니라 문자를 결합한다.console.log(10 % 2);// %연산자는 나눗셈을 한 후 몫이 아닌 나머지를 결과값으로 출력한다.// 10에서 2를 나눈 후 그 나머지인 0이 출력된다.console.log(2 ** 3);// 2^3 = 8 2. 증감 연산자 숫자를 증가, 감소시키기 위해 사용되는 연산자.++ : 증가-- :감소let number = 10;number++;..

Reference Type 참조 데이터 타입이란, 원시 데이터 타입이 할당될 때 변수에 값(value) 자체가 담기는 것과 달리, 보관하는 곳의 주소(reference)가 담기는 데이터 타입을 의미한다. 원시 데이터 집합으로, 배열(Array)이나 객체(Object)가 대표적.고정된 크기를 가지지 않고, 주소만을 가지므로 동적으로 크기가 변하는 데이터를 보관할 수 있다. 1. 배열 데이터 타입의 집합으로, 인덱스(index)를 사용해 순차적으로 접근할 수 있는 데이터 타입const arrN = [1, 2, 3];const arrS = ['Hello', 'world'];console.log(arrN);console.log(arrS); 배열을 만들기 위해서는 위 코드와 같이 [ ] 대괄호 안에 요소들을 ..

https://kr.freepik.com/free-vector/javascript-abstract-concept-illustration_12290877.htm#fromView=keyword&page=1&position=3&uuid=dc04c11f-1327-4a97-b53b-90972ea5678b&query=Javascript">출처: Freepik_(작가/vectorjuice) 1. 기초 문법 part. 1 (1) 세미콜론 ; JavaScript는 세미콜론을 문장의 끝에 넣지 않아도 에러가 발생하지 않는다.다만 다른 언어에서는 에러를 띄우는 경우도 있고 붙이는 것이 보편적이고 암묵적인 규칙이다. (2) 변수와 상수 1) let 해당 키워드를 사용하고, 그 뒤에 사용할 변수 이름을 작성한다.let age..

렉시컬 스코프(Lexical Scope) 1. 렉시컬 스코프란? 렉시컬 스코프는 '코드가 작성된 위치(정적인 코드 구조)'를 기준으로 변수의 유효 범위(Scope)를 결정하는 방식이다.함수가 어디서 호출됐는지가 아니라 어디에 정의됐는지를 기준으로 스코프가 정해짐.JavaScript는 렉시컬 스코프 언어 JavaScript는 정적 스코프(Lexicla Scope)를 따른다.즉, 함수가 정의될 당시의 코드 환경(스코프 체인)을 기억한다. 기본 렉시컬 스코프const x = 1;function outer() { const x = 10; function inner() { console.log(x); } inner();}outer(); // 출력: 10inner()는 outer() 내부에 정의되었기..