[React 2.] #09~16

홍민기·2022년 6월 26일
0

React

목록 보기
2/7

#10. var, let, const 사용하기

var 변수 : 재선언, 재할당 허용 let 변수 : 재선언 허용X, 재할당 허용 const 변수 : 재선언, 재할당 허용X

#11. 전개 연산자 사용하기

배열명, 객체명 앞에 ...(마침표 3개)를 붙여 여러 개를 한 번에 합칠 수 있다.

#13. 화살표 함수 사용하기

화살표 함수는 'function' 대신 '=>' 문자열을 사용하며 'return' 문자열을 생략할 수도 있다. 또한 콜백 함수에서 this를 bind해야 하는 문제도 발생하지 않는다.

#15. map() 함수 사용하기

배열 함수 map()은 forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 차이점은 map()은 forEach()와 달리 return을 사용해 반환 값을 받을 수 있다. map()함수를 사용해 순서대로 하나씩 요소에 접근해 받아온 뒤, 마지막 요소까지 반복했다면, 한 번에 새로운 배열에 저장한다(return 이용).

#16. jquery 사용하기


jquery를 import한다. 이 예제에서는 jquery 문법 $('#inputId')로, id값이 inputId인 태그에 접근한다. 그 후 input_val을 alert창으로 표시한다. 여기서 처음엔 this를 넣었더니 undefined가 떴었는데, 사진처럼 this를 지우고 input_val로만 적었더니 해결됐다. 왜 그런진 모르겠다..
(수정)
궁금해서 검색을 해 보았다. 화살표 함수는 자신만의 this를 갖지 않기 때문에, 바깥 스코프에서 this의 값을 계승 받는다. 이러한 특징 때문에 객체의 메소드로 화살표 함수를 사용하는 것은 적합하지 않다. 이 문제에서는 this가 호출한 객체를 가리키지 않고, 상위 컨텍스트인 전역 객체, window를 가리키게 된다.


[출처 : 초보자를 위한 리액트 200제(정보문화사)]
profile
안녕 :P

0개의 댓글