js

디스트럭처링 할당 (destructuring assignment), 구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것필요한 값만 추출해 변수에 할당할 때 유용함 배열 구조 분해 할당배열 구조 분해 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스임순서대로 할당됨변수의 개수와 이터러블의 요소의 개수가 반드시 일치할 필요는 없음배열 구조 분해 할당을 위한 변수에 Rest 요소 사용 가능const arr = [1,2,3];const [one, two, three] = arr;const [x, ...y] = arr;console(x,y); // 1 [2,3]   객체 구조 분해 할당각 프로퍼티를 객체로부터 추출해 1개 이상의 변수에 할당..

서론... 리액트를 개발하면서 .js 파일과 .jsx 파일을 사용하는데 보통은 .jsx를 사용한다고만 알고있었지 실제로 둘의 차이점을 복기해가면서 개발하지 않았던 것 같다 두 파일의 차이점에 대해 의문이 들었고 개발을 하는데 이런 기본적인 지식을 모르고 개발한다니! 라는 생각이 들어 찾아보게 되었다 .js 파일 .js 확장자의 파일은 일반적인 자바스크립트 파일이다 즉 일반적인 Javascript 구문만을 사용하여 동작한다 .jsx 파일 .jsx 파일은 Javascript XML의 약자로 React 컴포넌트를 js 파일 내에서 작성할 수 있는 문법 확장이다. 즉, js 파일 내에서 UI 컴포넌트를 정의할 수 있고 HTML 과 유사한 구문을 사용해 UI 구조를 보다 직관적으로 작성할 수 있게 하는게 jsx ..

💡 결론 : React에서 key를 사용하여 엘리먼트 혹은 컴포넌트의 변화를 감지해 효율적인 DOM 사용을 위해서 1. 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. Duke Villanova // 변경 Connecticut // 자식요소 추가 Duke Villanova 위와 같은 경우 React는 Duke와 Villanova 종속 트리를 그대로 유지하는 대신 모든 자식을 변경 (다시 렌더링)한다. React 입장에서 컴포넌트를 반복해서 렌더링 하는 일은 매우 비효율적임! Keys 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 캐치할 수..

Event 생성과 제거 .addEventListener() : 대상에 이벤트 청취를 등록. 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출됨 .removeEventListener() : 메모리 관리를 위해 등록한 이벤트 제거 Event 객체 대상에서 발생한 이벤트 정보를 담고 있음 event.target : 이벤트가 발생한 요소 event.currentTarget : 이벤트가 등록된 요소 기본 동작 방지 event.preventDefault() : 브라우저에서 기본적으로 제공하는 동작을 방지함 버블링 이벤트 버블링 : 이벤트 전파. 즉, 작은 범위에서 넓은 범위로 이벤트가 전파되는 현상 event.stopPropagation() : 이벤트 전파 방지 캡처링 이벤트가 버블링되면서 하위 함수부터 각 ..