hee-ya07 님의 블로그

보호되어 있는 글입니다.

1. 클래스 컴포넌트: v16.8 이전까지의 리액트 컴포넌트 구성 방식- 전체 코드더보기class Person { // 생성자 (Constructor) constructor(name, age) { this._name = name; // 내부적으로 사용하는 _name, _age this._age = age; } // Getter: name 속성의 값을 가져올 때 호출 get name() { return this._name; } // Setter: name 속성의 값을 설정할 때 호출 set name(newName) { if (newName.length > 0) { this._name = newName; } else { console.log("이름..

1. React 문법 : JSX: JSX (JavaScript XML, JavaScript Syntax eXtension): 마크업 언어와 로직을 따로 분리하지 않고 하나의 파일에 보이는 컴포넌트라는 느슨하게 연결된 유닛- Angular와 React더보기1. Angular의 경우 : 마크업 언어와 로직을 분리하여 개발2. React, Vue의 경우 : 컴포넌트라는 느슨하게 연결된 유닛으로 개발2-1. Vue: HTML + JS + CSS가 ".vue" 파일 내 존재 가능2-2. React : HTML or XML + JS + CSS가 ".jsx" 파일 내 존재 가능1.1 문법적 요소들1) .jsx는 무조건 하나의 요소로 반환되어야 함 -> 전체를 감싼 하나의 태그가 필요// Ex) 오늘의 할 일 빨래..

1. DOM 조작의 변화1.1 "직접" 조작 - Javascript: js를 통해 DOM을 변경하여 view에 영향: 각 WB에 맞는 코드를 작성해야 했음(각 WB의 JS엔진 구성에 따라 문법 수행이 다르기 때문)단점1) Hard to Manage : DOM 요소를 매번 선택 및 조작 -> 개발자의 어려움2) Repetitive : DOM 요소의 상태가 바뀔 때마다 이뤄지는 반복적인 Rendering -> 상호작용이 많을 경우 보기 불편1.2 "간편" 조작 - JQuery: JQuery는 Javascript 라이브러리로 이를 통해 DOM조작을 간편하게 할 수 있음JQuery를 통해 DOM 요소 선택, 조회 및 수정 가능But, 상태 변화에 따른 반복적인 Rendering은 아직도 단점으로 존재: 추가적으..