1. DOM
- 웹 문서의 프로그래밍 인터페이스(웹 브라우저가 이해할 수 있는 구조)
- 모든 요소와 속성들이 개체를 형성하고, 트리 형태로 구성됨
DOM 형성 과정
- HTML을 파싱받아 DOM 트리 생성
- CSS파일을 파싱받아 CSSOM 트리 생성
- 위 둘을 결합하여 Render 트리 생성
- [참고] css에서
display: none 일 경우, Render 트리에서 제외됨
- [참고] css에서
visibility: invisibe일 경우, Render 트리에 포함됨
- 웹 브라우저의 스크린에서 각 개체들의 위치와 크기 계산
- 각 개체들의 텍스트, 색상 등을 적용하여 실제 우리가 보는 화면을 구현
2. Virtual DOM
- 실제 DOM의 복사본
- JavaScript에서 구현됨
Virtual DOM 작동 과정
- DOM의 개체들이 변경 사항이 생기면 Virtual DOM 리렌더링
- 실제 DOM과 Virtual DOM과의 차이점을 찾음
- 그 차이점만 실제 DOM에서 리렌더링
3. React Hook을 사용한 리렌더링 최적화
useReducer
- useState의 대체제로
reducer의 형태를 가지는 Hook
const [state, dispatch] = useReducer(reducer, initialState);
- 하위 컴포넌트에서의 상태 변경 함수 작성을 회피할 수 있음
- state간 의존적 관계 존재시 사용
- 하위 컴포넌트로 콜백 대신 dispatch를 전달하여 성능 최적화 가능
useCallback
<button onClick={handleClick}>버튼</button>
- 위의 button 컴포넌트는 리렌더링될 때마다 함수를 새로 생성하는 단점이 존재
const handleClick = React.useCallback(
() => console.log('clicked!'),
[]) // 두번째 인자인, []은 참조하는 상태값이 없다는 의미
- 특정 함수를 저장해, 컴포넌트의 리렌더링에도 함수를 새로 생성하지 않음
useMemo
const [cnt, setCnt] = React.useState(0)
const temp_value = React.useMemo(
() => cnt +1,
[cnt]) // 두번째 인자인, [cnt]은 참조하는 상태값으로 cnt를 의미
console.log(temp_value) // cnt의 변화가 있을 때만 연산이 실행됨
4. React가 렌더링을 수행하는 조건
- Props가 변경되었을 때
- State가 변경되었을때
forceUpdate()가 실행될 때- 부모 컴포넌트가 렌더링될 때
5. 자바스크립트 This - 출처
- 함수나 메소드가 호출될 때, 참조하는 object를 의미
object.함수(메소드)형식일 경우, this는 해당 object- 함수(메소드)가
call/apply/bind를 사용했으면, this는 그 첫번째 인자
call : 함수의 호출될 컨텍스트를 하나하나 지정함apply : 함수의 호출될 컨텍스트를 배열로 지정함bind : call과 동일하나 컨텍스트가 바인딩된 함수를 리턴함
new 함수로 호출되었으면, this는 새로 생성된 object화살표 함수인 경우, this는 부모의 스코프엄격모드(strict mode)인 경우, this는 undefinedhtml의 특정 개체의 이벤트리스너에서 함수 호출시, this는 해당 개체- 그 외에서 this는
window object
6. 자바스크립트 스코프 - 출처
- 함수를 선언할 때 생성됨
- 지역변수는 전역변수에 영향을 미칠 수 없다
- 자바스크립트는 지역 스코프에서 시작, 이후 전역 스코프로 탐색을 넓히며 변수를 찾는다
- 함수 x의 지역 스코프에 변수 a가 없으면, 전역 스코프에서 찾는다
스코프 체인
- 스코프를 넓히면서 찾는 전역변수와 지역변수의 관계의 특성
- 내부 함수는 외부함수의 변수에 접근 가능하지만, 그 반대는 불가능
렉시컬 스코핑(Lexical Scoping)
- 함수가 선언되며, 함수의 내부변수는 자신의 스코프에서 가장 가까운(or 상위의) 변수를 참조하는 것
var name = 'zero';
function log() {
console.log(name); // wrapper의 지역변수 name X, 전역변수 name O
}
function wrapper() {
var name = 'nero';
log();
}
wrapper(); // zero
- 그러므로 전역변수를 선언하는 건 최대한 지양하여, 의도하지 않은 전역변수가 참조되는 일을 방지하자
- 함수안에 내부변수로 or 객체 안의 속성으로 선언하자
var obj = {
x: 'local',
y: function() {
alert(this.x);
}
}
// 접근시, obj.x, obj.y()로, 이를 네임스페이스를 만든다고 표현함
7. 자바스크립트 실행 컨텍스트 - 출처
컨텍스트
- 코드의 실행환경
- 원칙
- 젤 먼저 전역 컨텍스트 생성되고, 함수 호출시 함수 컨텍스트 생성
- 컨텍스트 내부에는 변수객체(arguments, variable), Scope Chain, This 존재
- 사용되는 변수의 값을 찾는데 렉시컬 스코핑으로 동작함
- 함수가 종료되면 함수 컨텍스트 삭제(클로저 제외), 페이지 종료되면, 전역 컨텍스트 삭제
전역 컨텍스트
- arguments(함수의 인자): 없음
- variable: 전역변수
- scope chain: 자기 자신
- this: window
함수 컨텍스트
- arguments: 함수의 인자
- variable: 함수 내부 변수
- scope chain: 자기 자신, 전역 컨텍스트
- this: window
호이스팅
- 변수를 선언하고 초기화될 때, 선언부분이 최상단으로 끌어올려지는 현상
- var변수 선언과 함수선언문에서 발생
- 함수선언문
function sayWow() {
console.log('wow');
}
8. 자바스크립트 클로저
- 비공개 변수를 가질 수 있는 환경에서의 함수
- 비공개 변수를 만들어 의도하지 않은 조작을 통제할 수 있는 방법
var makeClosure = function() {
var name = 'zero';
return function () { // 클로저
console.log(name);
}
};
var closure = makeClosure(); // function () { console.log(name); }
closure(); // 'zero';
var counter = function() {
var count = 0;
function changeCount(number) {
count += number;
}
return {
increase: function() {
changeCount(1);
},
decrease: function() {
changeCount(-1);
},
show: function() {
alert(count);
}
}
};
var counterClosure = counter();
counterClosure.increase();
counterClosure.show(); // 1
counterClosure.decrease();
counterClosure.show(); // 0
9. 자바스크립트 이벤트루프 - 출처
- 싱글 쓰레드인 자바스크립트의 비동기 처리 기능의 핵심 요소
- 이벤트 루프는 호출스택이 비워지면, 테스크 큐에서 하나씩 뽑아 호출 스택으로 푸시함
10. 이벤트 버블링, 이벤트 캡쳐, 이벤트 위임
이벤트 버블링
html의 특정 개체에서 이벤트가 발생하면 해당 이벤트가 상위의 개체로 전달되는 특성
이벤트 캡쳐
addEventListener('click', logEvent, {
capture: true // capture를 true로 하면 이벤트 버블링과 반대 방향으로 탐색
})
[참고] 이벤트 전파를 막겠다하면
이벤트 위임
html의 상위 개체에서 하위 개체의 이벤트를 제어하는 것
댓글