react 시작
유데미 완벽가이드 React 시작! 하루에 1강씩 진도 빼는 게 목표. 2/33
부트캠프 일정 맞추랴
유데미 js도 듣고 미니 프고젝트? 도 해야되고
캠프에서 제공하는 js도 들어야되고
react도 곧 들어간다고 하니 미리 진도를 빼놔야 따라갈 듯 싶어서
시작. 조만간 알고리즘도 해야되는데 효율적으로 해야지
적는 시간보다 대본을 그대로 복붙하고 거기서 배운 내용을 추려내는게 더 효율적으로 보여서
그대로 가져옴
react 들어가고 다시 볼때 정리를 ....
p1
3. 리액트JS 와 "바닐라 자바스크립트" 비교: 왜 리액트를 사용해야 할까요?
우리가 index.js 파일에서
document.getElementById(“root”)를 선택해서
<div id=”root”>가 선택되면
리액트가 이 <div>와
그 내용을 제어하기 시작해요
그때 중요한 게 이 App.js 파일인데
말하자면 핵심 코드가 담겨 있죠
안에 App()이라는 함수가 있는데
내용에 특이한 점이 있어요
HTML 코드가 잔뜩 들어 있죠
이건 자바스크립트의 기본 기능이 아니에요
기본적으로 자바스크립트 파일에
HTML 코드를 추가하면 오류가 나거든요
기본적으로 지원이 안 돼요
그러나 리액트 프로젝트에선 가능합니다
백그라운드에서 전체 프로젝트가
설정된 방식 덕분이죠
리액트의 핵심 기능 중 하나가
HTML과 자바스크립트 코드를 섞어 쓰는 거예요
10. 로컬에서 리액트 프로젝트 생성하기
다운받은 프로젝트 스냅샷을 실행하려면
비주얼 스튜디오 코드에서 ‘새 터미널’을 클릭합니다
그러면 기본 시스템 터미널 또는
명령 프롬프트가
비주얼 스튜디오 코드 안에 열리고
이 프로젝트 폴더에 들어와져요
이제 가장 먼저 npm install부터 입력해야 해요
npm 명령어 자체가 Node.js에 포함된 거라
Node.js를 설치해야만 작동하죠
npm install을 실행하면
프로젝트가 제대로 실행되는 데 필요한
추가 의존성과 패키지를
설치할 겁니다
가령, 리액트 라이브러리를 다운받아
이 프로젝트에 설치할 거예요
프로젝트를 다운받고 나서
npm install은 한 번만 실행하면 됩니다
그리고 npm start를 실행하면
개발 서버가 시작돼
리액트 앱 미리 보기가 가능해져요
개발 서버의 장점은
서버가 실행되는 동안에는
코드를 수정하고 파일을 저장하면
웹사이트를 자동으로 업데이트해
변경 사항을 반영한다는 겁니다
그러니 코드로 작업하는 동안에는
서버를 실행 상태로 유지하다가
그날 작업을 마치면
Ctrl+C로 서버를 닫으면 돼요
작업을 계속하고 싶을 땐
npm start로 서버를 재시작하면 되고요
새 리액트 프로젝트 생성
npx create-react-app my-app
11. 코드샌드박스로 리액트 개발하기(로컬 설정 필요없음!)
그렇지만 코드샌드박스로
아예 새로운 프로젝트를 생성할 줄 알아야겠죠
사실 매우 간단한데요
브라우저 주소창에 react.new를 적고
엔터를 치면
곧장 코드샌드박스로 이동하며
새로운 리액트 프로젝트가 열립니다
part2 자바스크립트 새로고침
15. 페이지에 자바스크립트 추가하기 및 리액트 프로젝트의 차이점
script 태그에
더 많은 속성을 추가할 수도
있습니다
예를 들어 defer 속성을 추가해
나머지 HTML 문서를
읽어와 파싱한 후에
스크립트가 import되고
실행되도록 만들 수도
있습니다
이렇게 하면
스크립트 코드가
예를 들어 다른 HTML 요소를
사용해야 할 때 자바스크립트
코드가 실행되기 시작할 때 HTML 요소가
이미 로드되도록 보장할 수 있습니다
defer 속성이
없으면 바로 실행되므로
만약 이 순서 없는 리스트를
사용하려고 했을 때
스크립트가 이 리스트보다
먼저 로드되면
이 순서 없는 리스트가
준비되지 않았을 수도 있습니다
그런 경우 defer를 사용하면 좋습니다
모던 자바스크립트 프로젝트에서는
defer 이외에도
script 태그에 자주
추가하는 속성이
있습니다
바로 type 속성을 추가하고
module로 설정하는 겁니다
이 type="module" 속성을
script 태그에 추가하면
이 자바스크립트 파일을
자바스크립트 모듈로 취급하게 됩니다
자바스크립트 파일을
모듈로 취급하면
아주 중요한 새 문법을 사용할 수 있습니다
import 문법입니다.
다른 스크립트의 코드를
이 스크립트에 import할 수 있습니다
예를 들어 다른
스크립트 파일
util.js를
생성해 유틸리티 기능을 넣고
이 스크립트 파일에서
export 키워드로
특정 기능을 export하고
app.js 파일에서
import할 수 있습니다
import/export 문법은
모듈 기능을 다룰 때
자세히 다루겠습니다
하지만 그 전에
HTML 파일의 script 태그에
대해 아셔야 할 중요한
내용이 있습니다
리액트 앱을 만드는 것과
관련해 script 태그와
스크립트 파일 import에 대해
알아야 할
중요한 내용입니다
리액트 프로젝트를
작업할 때
HTML 파일에 직접 script 태그를
추가할 일은 거의 없습니다
리액트 프로젝트는 대부분
빌드 프로세스를 활용하며
빌드 프로세스의 과정에서
HTML 코드에 자동으로
script 태그를 추가하기 때문입니다
다음 강의에서 리액트 프로젝트에
왜 그러한 빌드 프로세스를 사용하는지
알아보겠습니다
16. 리액트 프로젝트 구축 프로세스
script 태그는 없습니다
왜 정상적으로 작동할까요?
저번 강의의 마지막에 언급한 대로
리액트 프로젝트는 빌드 프로세스를 사용합니다
작성한 코드가 그대로 브라우저에서 실행되는 게
아니라는 의미입니다
그 대신 브라우저에 전달되기 전에
내부적으로 코드가 수정됩니다
코드샌드박스의 이 데모 프로젝트나
백그라운드에서 작동하는 툴에 의해
이 프로세스가 진행됩니다
17. "import"와 "export"
자바스크립트 지식
복습을 시작하기 위해
먼저 이전에 언급한 import/export 문법에 대해
알아보겠습니다
이 강좌에서는 많은 것을 import하고
export할 테니까요
리액트 앱에서는
다른 고급 자바스크립트 프로젝트와 마찬가지로
여러 파일에 코드를 분리해 관리하기
쉽게 만드는 것이
좋은 방법입니다
이렇게 하려면
import와 export 키워드가 필요합니다
이제 util.js 파일에
다른 파일에서도 사용할 특정 값을
추가하겠습니다
app.js 파일에서도 사용할 겁니다
apiKey 변수를 생성합니다
자바스크립트에서 변수는
let 키워드를 사용해 생성합니다
변수와 상수에 대해서는
이 섹션의 이후 강의에서
더 자세히 설명하겠습니다
여기에 스트링을 저장하겠습니다
작은따옴표나 큰따옴표 모두 사용할 수 있습니다
암호 API 키 문자열을 저장해
백엔드에 HTTP 요청을
전달하는 데 사용할 겁니다
그냥 더미 예시일 뿐이지만
이 섹션에서는 자바스크립트 지식을
복습하는 게 목적이므로
계속 더미 예시를 보여드릴 겁니다
이 API 키 값
이 스트링을
다른 파일에서도 사용할 수 있어야 합니다
따라서 export해야 합니다
변수 앞에 export 키워드를 추가합니다
이렇게 하면 이 변수를
다른파일에서도 사용할 수 있습니다
이제 사용할 파일에서 import하면 됩니다
예를 들어 app.js 파일에서
import 키워드를 사용하면 됩니다
중괄호를 열고 닫은 후
괄호 사이에 export할 대상의
이름을 입력하면 됩니다
여기에서는 변수의 이름이고
함수를 export하려면
함수의 이름입니다
여기에서는 변수의 이름이므로
이렇게 apiKey를 입력합니다
대소문자를 구별합니다
자바스크립트는 대소문자를 구별하는 언어니까요
그리고 from 키워드를
사용해 어떤 파일에서 apiKey를
import하는지
자바스크립트에 알려줍니다
파일 경로는 따옴표 안에 입력합니다, 마찬가지로
작은따옴표나 큰따옴표
모두 사용할 수 있습니다
여기에 상대 경로를 입력하면 됩니다
동일한 폴더 안에 있다면 ./로 시작하고
한 폴더 위로 이동하려면
../로 시작합니다
여기에서는 같은 폴더 안에 있으니
./로 시작하겠습니다
여기에 확장자를 포함한 파일 이름을 입력합니다
자바스크립트만 사용한다면 확장자를
입력해야 합니다, 리액트
프로젝트를 작업할 때는
확장자인 .js를
빼도 됩니다
이것도 마찬가지로
뒤에서 작동하는
빌드 프로세스가
확장자를 추가하기 때문입니다
빌드 프로세스를 사용하지 않는
자바스크립트 코드를 작성할 때는
직접 확장자를 입력해야 합니다
하지만 강좌를 진행하며 사용하는
리액트 프로젝트에는
빌드 프로세스가 있어 자동으로 확장자를 추가해 주니
직접 확장자를 작성하지 않을 겁니다
여기에서는 입력해야 합니다
이제 apiKey 변수와
그 값을 app.js 파일에서
사용할 수 있습니다
다른 파일에 정의되어 있지만
사용할 수 있습니다, 예를 들어
console.log(apiKey)로 콘솔 창에 출력할 수 있씁니다
중요한 점은 import/export
키워드를 사용하려면
type="module" 속성을 사용해야 한다는 점입니다
아주 중요합니다
하지만 리액트 프로젝트에서는
자동으로 추가된 script 태그에 type="module"
속성이 없는 것을 볼 수 있습니다
그 이유는
빌드 프로세스가
import와 export 키워드가 있는
개별 파일을 모두 합쳐
하나의 큰 파일을
만든 다음 기존 문법을 순서대로 사용해
import 구문을 처리하기 때문입니다
이렇게 하면 import/export 문법을 기본적으로
지원하지 않는 브라우저에서도 코드를 실행할 수 있고
브라우저가 여러 개의 작은 자바스크립트 파일을
다운로드하는 대신
몇 개의 큰 파일을 다운로드하면 되므로
더 효율적입니다
이를 참고해 리액트 프로젝트
script 태그에는
type="module" 속성이 없는 이유를
알아두시기를 바랍니다
하지만 빌드 프로세스가 없는
바닐라 자바스크립트 코드를 작성할 때는
type="module" 속성을
추가해야 합니다
이제 저장하고
앱을 새로 고친 후
콘솔을 열면
API 키가 출력됩니다
util.js 파일에서 import해
app.js 파일에서 사용한 겁니다
이게 export/import 문법을
사용하는 유일한 방법은 아닙니다
이게 export/import를 사용하는 한 가지 방법이고
다른 방법도 있습니다
변수 또는 함수 앞에 export 키워드를 달아
export하는 대신
default 키워드를 추가해 default export를
생성할 수 있습니다
이때는 변수를 생성하지 않습니다
따라서 이름을 할당하지 않고
그냥 값을 export합니다
이름 없는 값을 export하는 겁니다
그리고 default 키워드를 추가하면
이 파일에서 export하는
기본값이 이게 됩니다
중요한 점은
파일별로 하나의 default export만 존재할 수 있다는 점입니다
하나 더 추가하려고 하면 오류가 발생합니다
반면 이전에 사용한 문법으로는
default를 사용하지 않으면 몇 개든 export할 수 있습니다
이렇게 하면 다른 변수도
export할 수 있습니다
default 키워드를 사용하면
값을 직접 export하며
파일별로 하나의 값만 default export할 수 있습니다
차이점을 볼 수 있도록
기존 코드도 작성해 놓겠습니다
그리고 default export를 사용하면 app.js의
import 문법도 바꿔야 합니다
이렇게 import하는 게 아니라
중괄호 없이 import하고
원하는 이름을 할당하면
됩니다
export하는 default값에
이름이 할당되어 있지 않으므로
import하려는 파일에서 원하는
이름을 사용할 수 있습니다
이름은 반드시 할당해야 합니다
그런 다음 import하려는
파일의 경로를 명시합니다
이제 저장하고 파일을 새로 고치면
마찬가지로 콘솔에 출력되는 것을 볼 수 있습니다
default export와
해당하는 import 문법을 사용했습니다
export하려는 파일에서
하나의 함수 또는
하나의 값만 export하려고 할 때
사용하기 좋은
방법입니다
향후 강의에서 리액트 컴포넌트의
개념을 학습하면 하나의 파일에
하나의 컴포넌트, 즉 하나의 자바스크립트 함수만
존재하는 경우가 많으므로 이 문법을
자주 사용합니다
파일에서 export할 대상이 하나의 컴포넌트밖에
없으므로 default export를
사용하기 좋습니다
물론 원하는 방식을
사용하면 됩니다
default export 문법을
사용하면 import 문법도
바뀐다는 점만 유의하면 됩니다
export/import 문법에 대해
알아야 할 마지막 내용은
이 문법처럼 이름이 있는
대상을 export하고
다른 이름이 있는 대상도 export할 때
또 다른 import 문법을
사용할 수 있다는 겁니다
물론 이것과 동일하게 import해도 됩니다
이렇게 apiKey를 import할 수 있습니다
이름이 겹치지 않도록 이건
주석 처리하겠습니다
쉼표로 이름을 구분하며 모두
import할 수도 있습니다
하나의 파일에서 이름이 있는 대상이
여러 개 export된 경우
이렇게 여러 개를 import할 수 있습니다
default 키워드를 사용하지 않았다면요
여기 보시는 대로
default 키워드를 이름 있는 export와 함께 사용해도됩니다
default export가 하나만 있다면
default export와
다른 이름 있는 export를 함께 사용해도 문제없습니다
하지만 이렇게
import하려는 모든 대상의 이름을
중괄호 안에 쉼표로 구분해 입력하는 대신
자바스크립트 객체로 묶어
한 번에 import할 수 있습니다
이렇게 하려면 *를 사용하고
as 키워드 다음에
원하는 이름을 할당합니다
저는 util로
하겠습니다
그런 다음 import하려는
파일의 경로를 입력합니다
이렇게 하면 util.js가 제공하는 모든 대상이
이 객체에 결합됩니다
따라서 일반적인 자바스크립트
객체 표기법을 사용하면 됩니다
이름에
점 표기법을 사용해
abc 또는 apiKey에 액세스하거나
default라는 이름에 할당된 default export
값을 사용할 수 있습니다
이렇게 apiKey를 출력할 수 있습니다
새로 고치면
콘솔에 API 키가 출력됩니다
여러 export대상을 하나의 객체에 묶어
사용했습니다
마지막으로
as 키워드를 사용해 별칭을 할당할 수 있습니다
예를 들어
이름 있는 export대상 중
abc의 이름이 마음에 들지 않는다면
파일 안의 마음에 들지 않는 이름 뒤에
as 키워드를 사용해 별칭을 할당할 수 있습니다
content 같이 원하는 이름을 붙이면 됩니다
이제 console.log(content) 코드로
util.js 파일의 abc 변수에
저장된 값을 출력할 수
있습니다
import하는 파일에서
as 키워드를 사용해
이름을 변경하는 겁니다
as 키워드를 사용하면 import하는
대상에 별칭을 할당할 수 있습니다
이처럼 import/export를
다양하게 활용할 수 있습니다
간단하지만
앞으로 사용할 일이 많은
키워드이므로
잘 알아두는 것이
중요합니다
22. 화살표 함수 구문에 대해 자세히 알아보기
화살표 함수 구문에 대해 자세히 알아보기
화살표 함수를 다룰 때는 '구문 단축키'를 사용할 수 있습니다.
가장 중요한 것은 다음과 같은 대안에 대해 알고 있어야 한다는 것입니다.
1) 매개변수 목록 괄호 생략하기
화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있습니다.
(userName) => { ... }
가 아니라
userName => { ... }
라고 쓸 수 있습니다.
참고 하세요:
함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안 됩니다.
() => { ... } 라고 써야 옳습니다.
함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안 됩니다.
userName, userAge => { ... } 라고 쓰면 안 됩니다.
(userName, userAge) => { ... } 라고 써야 합니다.
2) 함수 본문 중괄호 생략하기
화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 중괄호를 생략할 수 있습니다.
number => { return number * 3;}
라고 쓰는 게 아니라
number => number * 3;
라고 쓸 수 있습니다.
아래와 같이 오류가 생깁니다.
number => return number * 3; // 이 경우 retrun 키워드는 생략되어야 하므로, 오류가 생깁니다.
number => if (number === 2) { return 5 }; // 이 경우 if 문은 반환될 수 없으므로 오류가 생깁니다.
3) 특수한 경우: 객체만 반환하는 경우
2)에서 설명한 짧은 대안으로 자바스크립트 객체를 반환하려고 하면, 다음과 같이 유효하지 않은 코드가 나올 수 있습니다.
number => ({ age: number }); // 객체를 반환하려고 합니다.
자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 래퍼로 취급하기 때문에 이 코드는 유효하지 않습니다.
객체를 생성하고 반환해야 한다고 자바스크립트에 “말하려면” 코드를 다음과 같이 수정해야 합니다:
number => ({ age: number }); // 추가 괄호를 써서 객체를 감싸줍니다.
객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하기 위한 것임을 이해합니다. 따라서 객체가 반환됩니다.
24. 배열 및 배열 메소드(map()과 같은)
map에 대해 알아둘 점은
어떠한 유형의 원소든 다른 유형의 원소로
변환할 수 있다는 점입니다
예를 들어 스트링을 새로운 스트링으로 변환하는
것뿐만 아니라
자바스크립트 객체로 변환할 수도 있습니다
hobbies.map((item) => ( { } ) ;
이를 위해 중괄호를 열고 닫아
객체를 생성하겠습니다
다만 여기에서는
소괄호로 전체를 감싸야 합니다, 그렇지 않으면
함수 본문을 감싸는 중괄호로 취급됩니다
따라서 자바스크립트 객체를 반환하기 위해
중괄호를 소괄호로 감싸야 합니다
이렇게 하면 이 중괄호가 화살표 함수의
함수 본문을 정의하는 것이 아니라 화살표 함수가
반환하는 새 객체를 정의하는
것임을 나타낼 수 있습니다
25. 디스트럭처링
배열과 객체와 관련해
두 가지
비교적 새로운 모던 자바스크립트 기능을
이 강좌에서 사용할 것이므로 알아 두셔야
합니다
첫 번째 기능은
배열 및 객체의 분해입니다
이 배열을 봅시다
userNameData 배열입니다
이름과 성이 담겨있습니다
객체에 저장할 수도 있는 정보지만
이건 배열입니다
코드에서
이름과 성을 모두 사용하려고 합니다
사용하기 편하도록
firstName이라는
상수 또는 변수를 생성하고
배열의 첫 번째 원소인 이름을
인덱스 0을 사용해 가져올 수 있습니다
그런 다음 lastName을 생성하고
userNameData에서
인덱스 1을 사용해 성을 가져옵니다
이렇게 하면
firstName과 lastName을 사용하면 됩니다
userNameData[0]와 userNameData[1]을
사용하는 것보다 직관적인 방법입니다
하지만 이 코드를 더 짧게 작성할 수 있습니다
이렇게 코드를 작성하는 대신
이 두 개의 상수 또는 변수를
한 번에 생성할 수 있습니다
= 기호의 왼쪽에 대괄호를
사용하면 됩니다
오른쪽에서는 새 배열을 생성합니다
왼쪽에서는
해당 배열을 분해해
이 문법을 사용하면
배열의 값을 가져오는 겁니다
그런 다음 원하는 이름의
상수 또는 변수를 정의해
첫 번째 상수 또는 변수에
배열의 첫 번째 원소를 매핑하고
두 번째에 두 번째 원소를 매핑합니다
이 문법을 사용하면 이전의 코드보다
훨씬 짧게 작성할 수 있으므로 유용합니다
이제 firstName와 lastName을
로그로 출력하는 등
상수를 사용할 수 있습니다
기존 데이터는 배열에 담겨 있었지만
분해를 통해
값을 가져와
각각의 상수 또는 변수에 저장했습니다
페이지를 새로 고침하면
Max와 Schwarzmuller가 콘솔에 표시됩니다
분해 문법을 사용해 생성한 두 개의 상수를
사용했습니다
분해 문법은 객체에도 사용할 수 있습니다
배열뿐만 아니라요
이런 user 객가 있다고
생각해 봅시다
이 값들을 각각의 상수 또는
변수에 저장하고 싶습니다
물론 name 상수를 생성하고
user.name을 저장하고
age 상수에 user.age를 저장할 수도 있습니다
이렇게 해도 되지만 이 코드의 길이를 줄일 수 있습니다
이렇게 작성하는 대신
분해를 사용하면 됩니다
객체를 다루고 있으므로
좌측에 중괄호를 사용하고
오른쪽에서 객체를 생성합니다
왼쪽에서는 객체를 분해합니다
배열을 분해하기 위해
대괄호를 왼쪽에 사용한 것과 동일합니다
여기에서는 객체를 분해하기 위해 중괄호를 사용합니다
name과 age를 가져옵니다
다만 여기에서는 원하는 대로 이름을 지을 수 없습니다
객체에 정의된 필드 이름을
사용해야 합니다
배열을 분해할 때는
위치에 따라 원소를 가져오므로 원하는 이름을
지을 수 있습니다
객체는
프로퍼티 이름을 기준으로 가져오므로
동일한 프로퍼티 이름을 사용해야 합니다
다만 콜론을 사용해 별칭을
할당할 수는 있습니다
콜론의 오른쪽에 별칭을
정의하면 됩니다
객체를 생성하기 위해
= 기호의 오른쪽에
중괄호를 사용할 때는
키와 값을 구분할 때 콜론을 사용했습니다
프로퍼티 이름과
해당 프로퍼티의 값을 구분했죠
= 기호의 왼쪽에
중괄호를 사용하면
분해하는 데에 사용되므로
콜론을 사용해
객체에서 가져온 프로퍼티와 거기에
할당할 별칭을 구분할 수 있습니다
이렇게 userName과 age를 출력할 수 있습니다
분해한 값을 사용하는 겁니다
이제 새로 고치면
값이 표시됩니다
분해 문법은 아주
중요한 자바스크립트 기능이며
앞으로 자주 사용할 겁니다
분해 문법에 대해 살펴보았습니다
26. 함수 매개변수 목록에서 디스트럭처링
함수 매개변수 목록에서 디스트럭처링
이전 강의에서 설명한 디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있습니다.
예를 들어, 함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 “꺼내어’” 로컬 범위 변수(즉, 함수 본문 내에서만 사용할 수 있는 변수)로 사용할 수 있도록 함수를 디스트럭처링할 수 있습니다.
다음은 예시입니다:
function storeOrder(order) {
localStorage.setItem('id', order.id);
localStorage.setItem('currency', order.currency);
}
storeOrder 함수 본문 내부의 "점 표기법"을 통해 order 프로퍼티에 접근하지 않고, 다음과 같이 디스트럭처링을 사용할 수 있습니다:
function storeOrder({id, currency}) { // 디스트럭처링
localStorage.setItem('id', id);
localStorage.setItem('currency', currency);
}
디스트럭처링 구문은 이전 강의에서 배운 것과 같습니다. 상수나 변수를 수동으로 생성하지 않을 뿐입니다.
대신, 들어오는 객체(즉, storeOrder 에 인수로 전달된 객체)에서 id와 currency 를 "꺼내어" 사용합니다.
이 예제에서 storeOrder 는 여전히 하나의 매개변수만 받는다는 점이 매우 중요합니다! 매개변수는 두 개가 아니라, 하나의 매개변수, 즉 내부적으로 디스트럭처링된 객체만 받습니다.
함수는 여전히 다음과 같이 호출됩니다
storeOrder({id: 5, currency: 'USD', amount: 15.99}); // 1개의 매개변수 / 값!
30. 함수를 값으로 사용하기
function handleTimeout( ) {
}
setTimeout( handleTimeout) ;
중요한 점은
함수에 다른 함수를 전달할 때
그 자리에서 정의하지 않고
미리 정의된 것을 전달할 때는
이름만 전달한다는 겁니다
소괄호를 달지 않습니다
소괄호를 작성하지 않아요
이름만 전달해
함수 자체를 이 함수에 값으로 전달합니다
소괄호를 추가하면
이 함수 handleTimeout이
타이머가 설정될 때
바로 실행된 다음
함수 handleTimeout의 반환값이 전달됩니다
여기에서는 값이 반환되지 않지만
반환되는 값이 setTimeout의 첫 번째 매개변수로
전달됩니다
여기에서는 그러면 안 됩니다
setTimeout에 함수의 반환값을
전달하는 게 아니라
함수 자체를 전달해야 합니다
setTimeout이 이 함수를 받아 향후에
내부적으로 실행합니다
따라서 이 함수가 바로 실행되지 않도록
소괄호를 붙이지 않아야 합니다
31. 함수 내부에서 함수 정의하기
32. 참조형과 기본 값 비교