리액트 면접질문

⚡리액트 state가 불변인 이유

쓰레드 세이프하다.

돌연변이(예상치 못한 상황)을 만들지 않는다.

React가 화면을 업데이트하는 과정

1. setState를 호출 (혹은 부모로부터 props를 전달 받음)
2. shouldComponentUpdate를 실행했는데 false를 리턴하면 여기서 멈추고, true를 리턴하면 다음 단계로 이동
3. 가상 DOM과 실제 DOM을 비교해서 변경사항이 있으면 화면을 다시 그린다

https://velopert.com/3486

---

Rest 파라미터 및 arguments 객체간 차이

* 둘 간의 차이를 잘 설명하는 블로그 참고하기

https://velog.io/@jinyongp/Rest-parameter-vs.-arguments

Rest parameter vs. arguments

---

Q.자바스크립트 클로저란?

클로저 : 클로저는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다.

function outer(){
	var title = 'coding everybody';
	function inner(){
        alert(title);
    }
    inner();
}

응집성이 떨어지므로 함수안에 함수를 선언해서, 그 함수안에서만 사용되는 함수로 내부함수를 선언한다.

내부 함수에서 title이라는 변수가 없다면 outer함수에서 변수를 찾게된다. 

⭐내부 함수는 외부 함수의 지역변수에 접근할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 메커니즘을 클로저라고 한다.

function outer(){
	var title ='coding everybody';
    return funtion(){
    	alert(title);
    }
}
var inner = outter(); //outter의 리턴값
inner(); //outer의 title에 접근가능.....

outer은 이미 리턴했기때문에 실행이 끝났는데, 외부 함수의 변수에 여전히 접근가능함!

function factory_movie(title){ //외부함수
	return { //객체
    	get_title: function(){ //내부함수1
        	return title;
        },
        set_title: function(){ //내부함수2
        	title = _title;
        }
    }
} 
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
alert(ghost.get_title());
alert(matrix.get_title());
ghost.set_title('공각기동대');

alert(ghost.get_title()); //공각기동대
alert(ghost.get_title()); //Matrix

private variable(소프트웨어의 정보를 아무나 수정하도록 하는 것을 방지하는 것)

ghost객체는 get_title메소드와 set_title메소드를 가지고(담고) 있다.
비밀변수가 가능하다!!
title은 외부함수의 지역변수는 factory_movie라는 함수가 어떤 값을 리턴했을때
함수가 생이 마감되었기때문에 지역변수인 title은 내부함수 getTitle과 setTitle을
통해서만 접근할 수 있는것.!!!

---

BAD!!

var arr = []
for(var i =0; i< 5; i++){
	arr[i] = function(){
    	return i;//function이 정의되는 시점의 i를 반환한다. 5만 출력됨!!!! i가 외부변수가 아니여서그럼 
    }
}
for(var index in arr){
  	console.log(arr[index]()); //arr[index]는 함수를 포함한 객체이다. 
}

GOOD!

var arr= []
for(var i=0; i<5; i++){
	arr[i] = function(id){  //id라는 매개변수를 가짐... 지역변수와 같은 효과를 가짐
    	return function(){
        	return id; //내부함수가 외부함수의 지역변수를 활용
        }
    }(i); //외부함수의 매개변수의 인자값으로 i
}

원하는대로 12345를 출력한다.

https://hyunseob.github.io/2016/08/30/javascript-closure/

JavaScript 클로저(Closure)

아주 좋은 설명 !