Chap2. 자바스크립트 새로고침

React를 공부하기전 자바스크립트를 대략적으로 복습하는 단원 입니다.
React에서 자주나오는 내용들을 대략적으로 복습 합니다.

[1] import 와 export

1. 일반적인 방식의 import & export 하는 경우

export 방법 : export 변수 변수명 = “더미텍스트";

[util.js] 
export let apikey = "aaaaaaaaaaa1";

import 방법 : import { 변수명 } from "./파일명.js“;

[app.js] 
import {apikey} from "./util.js";

2. default 키워드를 사용 하는 경우

export 방법 : export default “더미텍스트”;

[util.js] 
export default "aaaaab1";

import 방법 : import 임의의변수명 from "./파일명.js“;

• default 키워드를 사용한 파일을 가져올경우 변수명이 붙지 않았으므로 임의의변수명을 반드시 붙여주어야한다.

[app.js]
import apiapikey from “./util.js”;

3. 여러개의 export를 import 하는 경우

[util.js]
export let apikey = "aaaaaaa11";
export let apikey2 = "bbbbbbb22";
export default "cccccccc33";

• 여러개를 import할때 default가 들어간다면 반드시 변수명을 지정할 별칭을 지정해주어야한다.

[app.js]
import { apikey, apikey2, default as apikey3 } from "./util.js"
console.log(apikey, apikey2, apikey3);

또는

[app.js]
import { apikey, apikey2 } from "./util.js"
import apikey3 from "./util.js" // default의 변수명을 apikey3로 지정

4. 객체로 묶어서 한번에 import 하는 경우

[util.js 파일]
export let apikey = "aaaaaaa11";
export let apikey2 = "bbbbbbb22";
export default "cccccccc33";

[app.js 파일]
import * as 아무객채명 from "./util";
console.log(아무객체명.apikey, 아무객채명.apikey3, 아무객채명.default);

5. import할때 변수명이 맘에들지 않는경우 별칭 as를 사용.

[util.js 파일]
export let apikey = "aaaaaaa11";

[app.js 파일]
import {apikey as 별칭} from "./util"
console.log(별칭);

• import할때 상위폴더에 파일이 존재한다면 점을 하나 더붙인다
  ex) ../util.js
• import할때 js 확장자는 자바스크립트만 사용할때 반드시 붙여주어야한다.
  리액트 프로젝트로 작업한다면 생략이 가능하다. 빌드 프로세스가 확장자를 추가하기 때문.
• 파일별로 하나의 default export만 존재할 수 있다.
• import 또는 export 키워드를 사용할때는 type="module"을 반드시 사용해야함.
  리액트 프로젝트 작업시 생략 가능하다. import나 export 파일들의 개별 파일들을 모두 합쳐서 하나의 파일로 만들어 처리한다. 이러면 import나 export를 지원하지 않는 브라우저에서도 코드를 실행할 수 있고 하나의 큰 파일을 다운로드만 하면 되므로 더 효율적이다.

[2] 화살표 함수

1. 일반적인 사용법

( 매개변수1, 매개변수2, ... ) => { . . . }

let foo = (place,game) => { return place + "에서 " + game +" 하고 놀기 " };
let result = foo("수원","보드게임");
console.log(result);		// 수원에서 보드게임 하고 놀기 

2. 매개변수가 한개일 경우

매개변수를 묶는 소괄호를 생략할 수 있다.
매개변수 => { . . . }

let foo = game => { return game + " 하고 놀기 " };
let result = foo("보드게임");
console.log(result);		// 보드게임 하고 놀기

3. 매개변수가 없거나, 매개변수가 둘 이상인 경우

매개변수를 묶는 소괄호를 생략할 수 없다.

let foo = => { return "놀기" }; // SyntaxError
let foo = place,game => { return place + "에서 " + game +" 하고 놀기 " }; // SyntaxError

4. 화살표 함수의 함수 본문 중괄호 생략이 가능한 경우

화살표 함수에 반환문 외에 다른 로직이 없을 경우, return 키워드와 중괄호를 생략할 수 있음.

let foo = place => place + "에서 놀기 ";
let result = foo("수원");
console.log(result);		// 수원에서 놀기

다른 로직이 없어서 중괄호를 생략하기로 했다면, return 키워드까지 빼주어야한다. (옵션이 아닌 필수)
다음 코드는 에러가 발생한다.

let foo = place => return place + "에서 놀기 "; // SyntaxError: Unexpected token 'return' 

5. 객체만 반환하려 하는 경우

자바스크립트는 중괄호를 함수 본문 래퍼로 취급하기에 아래와 같은 코드는 올바르지 않다.

let foo = num => {age:num};
let result = foo(10);
console.log(result);		// undefined
console.log(typeof result); // undefined

객체를 생성하여 반환한다고 명시하기 위해서는 중괄호를 소괄호로 더 감싸주어야 한다.

let foo = num => ({age:num});
let result = foo(10);
console.log(result);		// { age: 10 }
console.log(typeof result);	// object

[3] 배열

메소드를 사용할때 함수에 들어가는 매개변수는 한가지가 아니라 여러가지가 들어가지만, 간단하게 필수 매개변수로만 사용하였다.
또한 배열의 메소드를 사용할때 일반함수를 사용해도 되지만, 화살표 함수를 사용하는 경우가 많다.

1. 배열 메소드 findindex

배열.findindex(function(매개변수) { .. } )
findindex : 함수를 실행하여 함수의 조건에 맞는 원소의 인덱스를 반환한다.

const place = ["수원" , "서울", "부산"];
console.log(place.findIndex((item)=>{ return item === "부산"})); // 2

2. 배열 메소드 map

배열.map(function(매개변수) { .. } )
map이란 새 배열을 반환한다. 기존 배열을 수정하는것이 아님을 알아두자.

객체를 반환하기

function transformToObjects(numberArray) {
   return numberArray.map( (item) => ({ val : item}) );
}
const newArr = transformToObjects([1,2,3]);
console.log(newArr);	// [ { val: 1 }, { val: 2 }, { val: 3 } ]

곱셈을 하여 새로운 숫자로 반환하기

const ArrayEx = [10 , 100 , 1000];
const newArrayEx = ArrayEx.map( item =>  item * 10  );
console.log(ArrayEx);	// [ 10, 100, 1000 ] 기존배열을 수정하지않음.
console.log(newArrayEx);	// [ 100, 1000, 10000 ]

3. 디스트럭처링

배열을 디스트럭처링하여 변수에 저장하기.
기존의 방식을 사용한다면 배열의 인덱스로 접근하여 변수에 저장 했었다.

const userNameData = ["Kim", "Minho"];
const firstName = userNameData[0];
const lastName = userNameData[1];
console.log(firstName + Minho);		// KimMinho

디스트럭처링 방식을 사용한다면 좀더 간결하게 변수에 저장하는것이 가능하다.

const [firstName, lastName] = ["Kim", "Minho"];
console.log(firstName + lastName);		// KimMinho

객체또한 디스트럭처링 할 수 있다.
기존의 방식은 . 접근방식으로 변수에 저장 했었다.

const user = {
   name : "Minho",
   age : 98
};					
const name = user.name;
const age = user.age;
console.log(name+"은"+age+"살"); // Minho은98살

디스트럭처링 방식을 사용한다면 간결하게 저장할 수 있다.
유의할점은 객체의 프로퍼티명과 매개변수명은 동일하게 해주어야 하지만, 콜론을 사용해 별칭을 사용하는것은 가능하다.

const {name : userName, age} = {
   name : "Minho",
   age : 98
};
console.log(userName+"은"+age+"살")	; // Minho은98살

4.스프레드 연산자

배열들을 병합하여 새로운 배열을 생성한다.

const arr1 = ["컴퓨터", "노트북", "태블릿PC"];
const arr2 = ["스마트폰"];
const mergeArr = [...arr1 , ...arr2];
console.log(mergeArr);	//[ '컴퓨터', '노트북', '태블릿PC', '스마트폰' ]

스프레드 문법을 사용하지 않는다면 중첩배열이 생성됨을 유의하자. 이런식으로 사용하는 경우가 있겠지만 사용 빈도수가 비교적 적다.

const arr1 = ["컴퓨터", "노트북", "태블릿PC"];
const arr2 = ["스마트폰"];
const mergeArr = [arr1 , arr2];
console.log(mergeArr);//[ [ '컴퓨터', '노트북', '태블릿PC' ], [ '스마트폰' ] ]

객체에도 스프레드 문법을 사용할 수 있다.

const user = {
   home : "고양시",
   age :  100
};

const extendedUser = {
   weight : 68,
   ...user
};
console.log(extendedUser);

[4] 함수 사용시 유의점

1. 매개변수에 함수를 값으로 받는 경우

• 함수를 다른 함수에 값으로 전달할 수 있다.
• 이 개념은 매우 중요하므로 많은 예제를 직접 써가며 체화 해보자.

function greeter(greetFn) {
   greetFn();
}
greeter(() => console.log("안녕하세요"));
greeter(() => console.log("반갑습니다"));
greeter(() => console.log("안녕히계세요"));

2. 내장함수 사용시 함수를 값으로 받는 경우

function greeter(greetFn) {
   greetFn();
}

greeter(() => console.log("안녕하세요"));
greeter(() => console.log("반갑습니다"));
greeter(() => console.log("안녕히계세요"));

function handleTimeout() {
   console.log("시간초과");
}

function handleTimeout2() {
   console.log("시간초과!!");
}

내장함수 setTimeout(함수,지연시간);
내장함수 매개변수에서 함수를 값으로 받는 경우

setTimeout(handleTimeout,2000);           // 시간초과
setTimeout(handleTimeout2,3000);           // 시간초과!!

내장함수 매개변수에서 함수를 직접 서술할경우

setTimeout(() => console.log("시간초과!!!!"),4000)  // 시간초과!!!!

매개변수로 함수를 값으로 받을경우에는 () 를 쓰지말자.
()를 쓰면 값을 반환하려 하기 때문에, 함수자체를 전달하려고하는 개발자의 의도와는 틀리게된다.

setTimeout(handleTimeout(),2000);  // TypeError

3. 함수내부에서 함수 정의하기.

바닐라 자바스크립트에서는 거의 사용하지 않는 기능이지만, 리액트 코드 작성할 때는 자주 사용한다.
(1), (2), (3)은 실행 순서

function init() {
   function greet() {		// (3)
     console.log("하이");
   }
   greet();	// (2)
}
init();	// (1)