09.10 - BOM & DOM / React에서 document VS ref / 함수의 Argument 객체

 

1. BOM(Browser Object Model, 브라우져 객체 모델)

- 브라우져의 창(window, 하나의 tab)과 관련된 변수와 method를 갖고 있는 객체 → window object!

- window 객체가 다른 모든 객체를 포함하는 가장 큰 개념

    - document 객체도 window 객체를 통해 접근할 수 있음(window.documnet. ...)

- 모든 global JS (objects, functions, variables)는 전부 window object의 멤버가 됨

- window에 해당하는 객체는 너무 많지만, 대표적으로는 [Screen, Location, History, Navigator, document, setTimeout, setInterver...] 등이 있음

** window.onload() event는 알아두면 좋을듯

https://www.w3schools.com/js/js_window.asp

JavaScript Window

2. DOM(Document Object Model, 문서 객체 모델

- document 객체로 대표됨

- JS로 html에 접근 및 조작할 수 있게 함

- browser에 저장되어 있는 cookie 값에 접근 및 조작할 수 있음(document.cookie)

 

3. React에서 html 요소에 접근할 때, document VS ref

https://stackoverflow.com/questions/37273876/reactjs-this-refs-vs-document-getelementbyid

reactjs this.refs vs document.getElementById

위 글의 주장

- 일반적인 경우에서 ref가 더 나음

- react에서는 document.getElementById() 등을 했을 때 의도한대로 결과가 나오지 않을 수 있음(same but multiple id인 case 있을 수 있음)

-ref를 사용하면 개발자가 정의한 곳에서만 ref 값에 접근할 수 있음 → 정의된 context 밖에서 ref에 대한 접근을 하려고 하면 state & props 사용을 강제함 → 단방향 data flow를 유지할 수 있음

- 하지만, ref 또한 자주 사용하는 것은 권장되지 않음. 공식문서에서는 아래 3가지 case에서만 Ref 사용을 권장함

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

- 다른 용도(data handling, state 대신 사용)로의 ref 사용을 자제해야 하는 이유

• 가장 큰 이유 → "React" 답지 못하게 되기 때문
  • 자세한 내용은 아래 블로그 참고

https://blog.logrocket.com/why-you-should-use-refs-sparingly-in-production/

Why you should use refs sparingly in production - LogRocket Blog

 

4. 함수의 Argument 객체

parameters(매개변수) → 함수를 정의하는 코드에서 함수가 전달 받을 값을 정의하는 변수

arguments(인자) → 함수를 호출하는 곳에서 함수에 전달하는 값

- js는 함수의 인자 값들을 Arguments라는 객체를 생성해 저장함. 그래서 정의한 param보다 많은 argument에도 접근할 수 있음

function test(a, b) {
    console.log(arguments[0], arguments[1], arguments[2]);
}

test(1, 2, 3) // 1 2 3 출력

- param보다 적은 arguments가 들어오면, 값을 받지 못한 param은 undefined가 됨

- Arguments 객체를 활용하면 param 개수가 일정하지 않은 가변 param function을 정의할 수 있음

function sum() {
	var total = 0
	for(var i = 0; i < arguments.length; i++) {
    	total += arguments[i];
    }
    return total;
}

sum(1, 2, 3, 4);

- 현재 실행되고 있는 함수를 참조하는 arguments.callee도 있음

 

 

그냥 필기

** CORS Issue에 따른 정보 유출을 방지하기 위해 origin-clean하게 path를 두는 것이 좋음