[React] section 1, 2

빌드 프로세스

리액트 프로젝트는 빌드 프로세스를 사용한다.
-> 작성한 코드가 그대로 브라우저에서 실행되는 것이 아니다.
-> 브라우저에서 실행되기 전에 내부적으로 코드가 수정된다.

react-script 패키지 ->
브라우저에 전달되기 전에 뒤에서 코드를 변환하는 다양한 툴을 제공
전달될 HTML 파일에 script 태그를 추가한다.

개발 서버가 뒤에서 소스 코드를 확인하고 소스코드를 변환해 html 파일을 수정해 script 요소를 추가한 후 변환된 소스코드를 로드한다.

왜 빌드 프로세스를 사용할까?
1) 처리되지 않은 리액트 코드는 브라우저에서 실행할 수 없기 때문이다.
리액트 코드는 특별한 jsx 기능을 사용하기 때문이다.
2) 작성한 코드가 프로덕션을 위해 최적화되지 않았기 때문이다.

import / export

리액트 프로젝트를 작업할때는 확장자인 .js를 빼도된다.
빌드 프로세스가 확장자를 추가해준다.
빌드 프로세스를 사용하지 않는 자바스크립트 코드에서는 확장자를 꼭 추가해주어야한다.

import / export를 사용하려면 index.html에 script 태그 에서 type = "module" 속성을 사용해야만 한다. (중요)
but 리액트 프로젝트에서는 빌드 프로세스가 import / export가 있는 개별 파일을 모두 합쳐 하나의 큰 파일을 만든 다음 기존 문법을 순서대로 사용해 import 구문을 처리한다.
이렇게 하면 import / export 문법을 기본적으로 사용하지 않는 브라우저에서도 코드 실행 ok
브라우저도 작은 파일 여러개가 아닌 큰 파일 몇 개를 다운 받으면 된다.

1) 변수나 함수 앞에 export 키워드를 사용하는 방법
ex) export let v = "value";
몇 개든 export할 수 있다.
import { v } from ~
2) export 앞에 default를 추가해 default export, 그냥 값을 export
ex) default export "value";
이름 없는 값을 export
파일별로 하나의 default export만 존재할 수 있다.
(중요) import 시 중괄호 없이 import 한다.
ex) import value from ~
default export 에는 변수 이름이 없기 때문에 import 에서 원하는 이름을 할당해주어야 한다.
export하려는 파일에서 하나의 함수 또는 하나의 값만 export 하려고 할 때 사용하기 좋은 방법이다.

default 키워드를 이름 있는 export와 함께 사용해도 된다.

전체를 import 하는 방법
import * as 어쩌구 from ~
어쩌구.저쩌구 (dot notation으로 접근)

자바스크립트에서는 일반적으로 카멜케이스를 사용한다.

되도록이면 const만 사용하는 개발자도 있고 let을 쓰면 코드가 적어지기에 (let은 재할당 가능) let만 사용하는 개발자도 있다.

매개변수에 디폴트 값을 줄 수 있다.

function greetUser (userName, message = "hello" ) {
...
}

const index = hobbies.findIndex((item) => item === "Sports");

찾는 item이 존재할 경우 item의 인덱스 반환,
아니면 false 반환

객체를 반환하기 위해서는 중괄호를 소괄호로 감싸야 한다.
아니면 함수의 중괄호로 취급한다.

const editedHobbies = hobbies.map((item) => ({}));

디스트럭처링

const [firstName, lastName] = ["Max", "Park"];
console.log(firstName);
console.log(lastName);

배열 디스트럭처링의 경우 위치에 따라 원소를 가져오므로 원하는 이름을 설정할 수 있지만 객체 디스트럭처링의 경우 이름을 똑같이 해야한다.
그러나 별칭을 할당할 수는 있다.

const {name : username, age} = {
name: "Max",
age: 25
};
console.log(username);
console.log(age);

디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있다.

function storeOrder({id, currency}) {
	localStorage.setItem('id',id);
    localStorage.setItem('currency', currency);
}

(중요) storeOrder는 하나의 매개변수만 받고 그 매개변수에서 꺼내어 사용하는 것이다.

spread operator

const mergedHobbies = [...hobbies, ...newHobbies]

만들어진 함수를 함수에 저장할때는 소괄호 붙이지 않는다.

setTimeout(handleTimeout, 2000);

모든 함수에서 다른 함수를 입력받을 수 있다.