[createContext, useContext]사용하는 이유부모 자식간에 props를 통해서 상태값 데이터를 전달함.A(최상위부모) - B - C - D - E(최하위자식) 의 관계에서 A의 state데이터가 C와 E컴포넌트에만 필요할 때 props로 넘기면A,B,C,D,E 차례대로 넘겨야 한다.이럴 경우 불필요한 props를 B와 D가 받게 되고 그 props state데이터에 변경이 일어나면 B,D컴포넌트가 불필요하게 리렌더링이 일어난다.createContext, useContext를 사용하면 props를 받지 않게 하면서 특정 컴포넌트만 context로 받은 상태값을 사용하게끔 하여 실제 상태값을 사용하지 않는 컴포넌트들이 리렌더링이 일어나지 않게 한다.context 생성 ( createConte..
프로퍼티는 객체에서 키와 값으로 이루어진 데이터를 뜻한다.프로퍼티 애트리뷰트(속성)는 말그대로 하나의 프로퍼티가 가지는 속성이다. 자바스크립트 엔진은 프로퍼티를 정의할 때 이 애트리뷰트(속성)를 자동 정의한다. Object.getOwnPropertyDescriptor(프로퍼티참조변수, '프로퍼티이름') 메서드를 사용하면 propertydiscriptor객체를 반환. 해당 프로퍼티의 애트리뷰트의 정보를 보여준다. titleDes = Object.getOwnPropertyDescriptor(game1, 'title');console.log(titleDes);------------------------------결과{ "value": "CartRider", "writable": true, "enumerab..
DOM(문서객체모델) 탐색
자식, 부모 노드 탐색 javascript에서는 자식이나 부모 노드를 탐색하는 프로퍼티를 제공한다.childNodes- 자식노드를 탐색. NodeList객체를 결과로 반환 - 요소노드, 텍스트노드 둘다 탐색firstChild- 첫번째 자식을 탐색- 요소노드, 텍스트노드 둘다 탐색 lastChild- 마지막 자식을 탐색- 요소노드, 텍스트노드 둘다 탐색children- 자식노드를 탐색. HTMLCollection객체를 결과로 반환- 요소노드만 탐색firstElementChild- 첫번째 자식 요소노드 반환lastElementChild- 마지막 자식 요소노드 반환parentNode- 자기 바로 위의 부모 요소노드를 탐색. childNodes 결과 : 0:text, 1:ul, 2:text, 3:div, ..
DOM(문서 객체 모델) 관련 정리
노드에 대하여.. Document Object Model(문서객체모델)은 HTML페이지에서 문서의 구조를 나타내며 이를 조작 및 제어할 수 있는 방법을 제시한다. 일반적인 HTML태그이며, DOM에서는 이것을 노드라고 한다.노드에는 다음 4개가 있다. document - 최상위(root) 노드. - 최상위 이기 때문에 아래 3가지 요소,속성,텍스트 노드에 접근하기 위해서는 document노드를 통하여야 한다. div, ul, li - 요소 노드. - 부모 노드와 자식노드를 가질 수 있다. first, second - 애트리뷰트(속성) 노드.- 부모노드를 가질 수 없다.- 이 노드에 접근하려면 해당 노드의 요소노드에 접근 필요 javascript, React.js, Vue.js..