draw

<pre class="language-javascript"><code>// 첫 번째 방법(ES5 방식)
var 홍길동 = '나';
console.log("'" + 홍길동 + "는 귀엽다'");

// 두 번째 방법(ES6+ 방식)
const 홍길동 = '나';
console.log(`'${홍길동}는 귀엽다'`);</code></pre>
이렇게 코드 짜시면 됩니다.
변수 이름일지라도 ""로 감싸버리면 문자로 인식해버리기 때문에 변수는 항상 변수 본래 이름 자체로 써줘야합니다.
아니면 ES6+ 방식인 템플릿 리터럴로 작성해주시면 쉽습니다.

\'와 변수를 같이 쓰면 안 되나요?

<pre class="language-javascript"><code>for(var index in arr) {
 console.log(arr[index]());
}</code></pre>
위 코드를 실행 시키면 차례대로 arr[0]() ~ arr[4]() 이런식으로 함수를 실행시키게 됩니다. 하지만 각 배열에 담긴 함수는 전역변수 i를 참조하고 i를 리턴하고 있죠. 그래서 최종적으로 5까지 증가된 전역변수 i가 5번 출력되는 겁니다. 즉, arr[4]가 5를 담고 있는게 아니라 0~4 인덱스 배열 전부 전역변수 i를 참조하고 있는 겁니다. 조금 잘못 이해하신 것 같아서 제가 다른 질문글에 답글 달아놓은 부분 다시 끌어올려 여기에 남깁니다.
우선 이런 문제는&nbsp;var&nbsp;의 문제점이라 볼 수 있습니다. es6(es2015)부터는 이런 문제때문에&nbsp;var&nbsp;대신&nbsp;const,&nbsp;let&nbsp;을 쓰자고 지향하고 있습니다.

<pre class="language-javascript"><code>for (var i = 0; i < 5; i++) {}
console.log(i);
</code></pre>
우선 위에 방식으로 for 문 안에 var i를 선언하고 바깥에서 console.log(i) 를 호출하면 이상하게 오류 없이 호출되는 걸 볼 수 있습니다. 그 이유는 var 선언 방식이 block scope가 아니라 function 단위 scope이기 때문에 for문이 끝났음에도 여전히 전역변수로써 유효하기 때문입니다. 전역변수로 선언되어 버리는 부분이 어떤 문제를 일으키는지 아래 코드를 보면서 살펴보죠.&nbsp;
<h3>* 영상에서의 코드</h3>

<pre class="language-javascript"><code>var arr = [];
for (var i = 0; i < 5; i++) {
 arr[i] = function () {
 return i;
 };
}

for (var index in arr) {
 console.log(arr[index]());
}
</code></pre>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&darr;

<pre class="language-javascript"><code>arr[0] = function () {
 return i;
};
arr[1] = function () {
 return i;
};

...

arr[4] = function () {
 return i;
};
</code></pre>
이런식으로 배열내 각 인덱스에 할당되겠죠. 하지만 return 값은 할당될 때의&nbsp; i 값이아니라 전역변수 i 를 참조하고 있기 때문에 이 함수들을 호출하면 계속해서 전역변수 i 의 최종 값인&nbsp; 5를 불러오게 되는 겁니다. 첫번째 for 문에서 루프가 끝나면서 전역변수 i의 값이 이미 5가 되었으니까요.
<h3>* 클로저를 사용하면 정상작동 하는 이유</h3>

<pre class="language-javascript"><code>for (var i = 0; i < 5; i++) {
 arr[i] = function (index) { // index는 parameter이며, 전달인자로 받은 i 값이 들어있다.
 return function () {
 return index;
 };
 }(i); // 전달인자(argument)로 i를 주고있다.
}

for (var func of arr) {
 console.log(func());
}
</code></pre>
클로저(closure)를 사용하여 전달인자(argument)로 i 값을 주면 배열에 각 함수가 할당될 때 그 때의 i 값을 매개변수(parameter)로 받기 때문에 지역변수를 사용한 것 같은 효과가 나게되는 것이죠.

첫번째 for문에서 i값 5가 5번 출력 되는 이유

<pre class="language-javascript"><code>const o1 = {
 val1: 1,
 val2: 2,
 val3: 3
}

for (const name in o1) {
 console.log(o1[name]); // val1, val2, val3
}</code></pre>
for ... in 문에서 앞에 선언부는 name으로 하든 value로 써놓든 개발하시는 분 마음이고&nbsp;객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복해줍니다. for ... in 문에서 in this 라고 this에서 반복한다고 선언했기 때문에 this가 가르키는 객체에서 키값을 불러오고 있는겁니다.

name이 뭐죠

이미 오래지나서 제 답변이 유의미할 지는 모르겠지만 수업내용과는 좀 차이가 있습니다. 작성자분께서 작성하신 코드는 arr[i] 에 함수를 할당하고 i를 전달인자(parameter)로 주고 바로 할당한 함수를 실행한 코드입니다.
<pre class="language-javascript"><code>for (var i = 0; i < 5; i++) {
 arr[i] = i;
}</code></pre>
결국 배열에 직접 값을 할당한 이 코드랑 같은 셈죠.
영상에서는 배열에 함수를 담아 사용할 때의 상황을 소개하고 있는데, arr[i] 에 함수를 할당 한 후 함수를 호출하였을 때 5만 계속 를 리턴하는 예상밖의 문제가 발생하죠.&nbsp; 그리고 그 해결책으로 Closure를 사용한 것입니다. 또한, 이건 var를 사용할 때의 문제점이기도 합니다.
문제 발생의 이유는 당시 배열에 할당된 함수가 전역변수 i를 계속해서 참조하고 있기 때문입니다. var는 function scope이기 때문에 for에서 선언하면 전역변수로써 기능해버리죠.
<pre class="language-javascript"><code>arr[0] = function () {
 return i; // 전역 변수 i를 계속해서 참조.
}

...

arr[1] = function () {
 return i;
}</code></pre>

섹션15. 클로저 응용 수업 질문

우선 이런 문제는 var 의 문제점이라 볼 수 있습니다. es6(es2015)부터는 이런 문제때문에 var 대신 const, let 을 쓰자고 지향하고 있습니다.
<pre class="language-javascript"><code>for (var i = 0; i < 5; i++) {}
console.log(i);
</code></pre>
우선 위에 방식으로 for 문 안에 var i를 선언하고 바깥에서 console.log(i) 를 호출하면 이상하게 오류 없이 호출되는 걸 볼 수 있습니다. 그 이유는 var 선언 방식이 block scope가 아니라 function 단위 scope이기 때문에 for문이 끝났음에도 여전히 전역변수로써 유효하기 때문입니다. 전역변수로 선언되어 버리는 부분이 어떤 문제를 일으키는지 아래 코드를 보면서 살펴보죠.&nbsp;
<h3>* 영상에서의 코드</h3>
<pre class="language-javascript"><code>var arr = [];
for (var i = 0; i < 5; i++) {
 arr[i] = function () {
 return i;
 };
}

for (var index in arr) {
 console.log(arr[index]());
}
</code></pre>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&darr;
<pre class="language-javascript"><code>arr[0] = function () {
 return i;
};
arr[1] = function () {
 return i;
};

...

arr[4] = function () {
 return i;
};
</code></pre>
이런식으로 배열내 각 인덱스에 할당되겠죠. 하지만 return 값은 할당될 때의 i 값이아니라 전역변수 i 를 참조하고 있기 때문에 이 함수들을 호출하면 계속해서 전역변수 i 의 최종 값인&nbsp; 5를 불러오게 되는 겁니다. 첫번째 for 문에서 루프가 끝나면서 전역변수 i의 값이 이미 5가 되었으니까요.
<h3>* 클로저를 사용하면 정상작동 하는 이유</h3>
<pre class="language-javascript"><code>for (var i = 0; i < 5; i++) {
 arr[i] = function (index) { // index는 parameter이며, 전달인자로 받은 i 값이 들어있다.
 return function () {
 return index;
 };
 }(i); // 전달인자(argument)로 i를 주고있다.
}

for (var func of arr) {
 console.log(func());
}
</code></pre>
클로저(closure)를 사용하여 전달인자(argument)로 i 값을 주면 배열에 각 함수가 할당될 때 그 때의 i 값을 매개변수(parameter)로 받기 때문에 지역변수를 사용한 것 같은 효과가 나게되는 것이죠.

첫번째 예시문에서 값이 왜 5가 5번 반복되는지 궁금합니다.

안녕하세요. 함수를 호출하고 싶다는 내용을 제가 잘못봤네요.
다른 컴포넌트에 있는 함수는 export 후 J에서 import하여 사용하면 되지 않던가요? 혹시 함수를 재사용하고 싶으신 경우에는 따로 코드를 분리시켜서 export 후 A, C, J에서 분리시킨 함수를 import해서 사용하는 방법이 있고, redux saga를 사용하여 특정 액션을 호출했을 때 saga middle ware에서 그 함수를 Call 해주는 방법이 있습니다.
아무래도 저도 배우는 입장이니 정확한 답변을 드리긴 힘드네요 ㅠㅠ 함수 구조에 따라 최적화해서 사용하는 방법이 있을 수 있으니 호출하시고 싶은 함수 구조를 코드로 같이 올려두시면 강사님께서 더 좋은 답변 주실거라 생각합니다.

ContextAPI 문의

강사님이 답변해주시겠지만, 결론부터 말하자면 Context API로도 전역으로 데이터를 관리할 수 있습니다. 상위 컴포넌트인 App 컴포넌트에서 Provider로 내려주면 A나 C, J에서도 사용할 수 있죠. 그렇지만 결국 Redux를 나중에 사용 할 예정이라면 지금부터 Redux에 익숙해지는게 더 나은 선택이란 생각이 듭니다. 간단한 어플리케이션에는 Context API도 괜찮은 선택이지만 복잡한 어플리케이션에는 Redux로 작성하는 편이 미들웨어도 적용할 수 있고 더 쉽게 관리할 수 있기 때문입니다. 저도 그렇고 배우는 입장이니 당장은 크게 상관없지만 Redux를 사용하면&nbsp; 조건에 따라 액션을 무시할 수도 다른 액션을 발생시킬 수도 있구요.
그래서 저도 Context API는 이런게 있구나하고 Context API로 몇번 코드 작성해보고 그냥 넘어갔고 이후엔 Redux를 사용하면서 익숙해져보려고 하고있습니다.

아직 js를 전부 아는 것이 아니라 proxy 사용법을 몰라 차차 공부해가며 한번 구현해봐야겠네요. 제가 라이브러리 급 함수를 구현할 수 있을지 모르겠네요 ㅎㅎ 답변 감사드립니다. 알려주신 링크 참고해보겠습니다!

immer 패키지 없이 createReducer함수 작성 문의

답변 감사합니다. 일단 알려주신&nbsp; 코드로는 테스트 해보니 질문 드린 두 부분 모두 정상 작동합니다. 궁금한 점이 아래 코드로는 eventListner를 해제시 레퍼런스가 같아 정상 해제 되는 것으로 보이는데, useEffect 상이 아닌 Component 함수에서 Ref객체를 수정&nbsp; 시엔 제대로 해제되지 않는 것 같습니다. 이 부분은 왜 그런지 알 수 있을까요?
아래 코드에서 useEffect내에서 Ref객체를 수정 하든 Component 함수에서 수정 하든 레퍼런스는 같으니 해제되어야 함이 정상 아닌가요? 제가 생각 하기로는 Concurrent mode 부분이 실험적인 기능이라 따로 설치해서 import하지 않으면 Concurrent로 작동 하지 않을 것 같은데.. 혹시 이 부분이 Concurrent mode와 연관이 있는건가요?
인터넷 강의 보다 책을 먼저 구매해서 따라가다가 강의내 프로젝트가 탐이나서 인강도 지금 듣고있는데 듣다보니 프로젝트가 아니라 질문 & 답변 부분이 이 강의를 구매하는 하나의 메리트란&nbsp;생각이 드네요. 저도 질문 드릴때마다 어떻게 질문 드리면 의도를 잘 이해하시고 답변해 주실 수 있을까 늘 고민하면서 질문합니다만,&nbsp; 코딩에서는 그 질문도 참 어렵단 생각이 듭니다.
모호한 설명에도 불구하고 질문 의도를 정확하게 파악해주시고 정확한 답변 주셔서 감사합니다.
<div style="box-sizing: inherit; color: #010101; font-size: 16px; background-color: #fafafa; margin: 0px; padding: 0px; line-height: 20.8px; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;">
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">import&nbsp;{&nbsp;useEffect,&nbsp;useRef&nbsp;}&nbsp;from&nbsp;"react";</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">export&nbsp;default&nbsp;function&nbsp;MyComponent({&nbsp;onClick&nbsp;})&nbsp;{</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;onClickRef&nbsp;=&nbsp;useRef();</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;useEffect(()&nbsp;=>&nbsp;{</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClickRef.current&nbsp;=&nbsp;onClick;</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;useEffect(()&nbsp;=>&nbsp;{</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener('click',&nbsp;onClickRef.current);</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;()&nbsp;=>&nbsp;window.removeEventListener('click',&nbsp;onClickRef.current);</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>테스트</div></div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">&nbsp;&nbsp;&nbsp;&nbsp;);</div>
<div style="box-sizing: inherit; padding: 0px 6px; white-space: pre; line-height: 20.8px;">}</div>

</div>

draw

Posts