[1장][희석] 리액트 개발을 위해 꼭 알아야 할 자바스크립트

[HeeSeok-kim]

퀴즈

문제 1.

for (var i = 0; i < 5; i++) {
 setTimeout(function () {
  console.log(i)
 }, i * 1000)
}

위 코드에서 문제점은 무엇인가요?

위 코드를 정상적으로 실행시키기 위해서는 어떤 방법이 있을까요?

문제 2.
리액트에서 얕은 복사를 사용하는 이유는 무엇인가요?

답

정답

문제 1. 변수 i가 전역 변수로 작동하기 때문에 5가 5번 출력되는 문제가 있다.

해결방법으로는 let을 사용하기
즉시 실행함수를 사용하기가 있다.

문제2.
완벽하게 비교하기 위한 재귀문을 넣었다면 랜더링 성능에 악영향을 끼쳤을 것이다.

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[hayamaster]

문제1 : var는 함수 레벨 스코프이기에 i가 전역 변수로 되어버린다. 이에 값은 모두 5가 될 것이다.
이를 해결하기 위해 블록 레벨 스코프인 let을 사용하거나, 함수의 인자로 넘겨줄 수 있게 만드는 즉시 실행함수를 사용할 수 있다.

문제2 : props 객체를 깊은 복사하게 되면 재귀적으로 검사를 해야해서 성능상에 문제가 생길 수 있다.

[hyoribogo]

1. for 문의 함수 스코프는 루프를 돌 때마다 새로운 렉시컬 환경을 생성한다. 이때 실행 컨텍스트의 렉시컬 환경으로 교체해 값을 등록하는데, 이때문에 전역 변수로 등록되어 원하지 않는 결과가 나올 수 있다.
   정상적으로 실행시키기 위해서는 let을 사용하거나 즉시실행함수를 통해 스코프를 한 번 더 중첩해 작성하면 된다.

2. 만약 재귀문을 통한 깊은 복사를 구현했다면 메모리 성능에 좋지 않을 수 있다.

[khj0426]

var로 반복문을 돌면 var가 전역 변수이기 떄문에 for문이 종료된 시점의 i인 4가 된다.
블록 레벨 스코프를 갖는 let으로 바꾼다.

결국 객체를 모든 깊이까지 비교해야 하면 재귀적으로 검사를 수행해야 하는데 이 경우 성능 상 문제가 생길 수 있다.!