React 입문 1주차 - 2

화살표 함수

화살표 함수에서 리턴문이 한 줄이라면 리턴과 중괄호를 없애도 된다.

콘솔 로그를 돌리기 위해서는 리턴과 중괄호를 넣은 상태로 돌려야한다.

조건 연산자 = 삼항 연산자

if, else문을 좀 더 간결하게 하기 위해 사용.

조건문 ? 참 : 거짓 

이렇게 사용한다.

단축평가

논리 연산자(||, &&)를 활용해서 로직들을 단축하는 것.

1. 논리합연산자( || )

falsy : false, 0, "", null, undifined, NaN
이 외의 것들은 truthy

마찬가지로 if else문을 더 간결하게 사용할 수 있다.

if (!user.name){
	return "신원미상"
};

이게 너무 길어서 위 코드가 들어있는 함수의 리턴에 

return user.name || "신원미상";

이렇게 사용할 수 있는 것이다.

좌변이 falsy 하면 우변실행, truthy하면 좌변 그대로

2. 논리곱연산자( && )

and연산자라고도 한다. 좌변이 truthy할 때만 우변을 실행한다.

3. optional chaining

없을 수도 있는 곳에 ?를 붙여서 오류를 내보내는 대신 undifined를 내보내게 하는 것이다.

 

 

메소드에서도 사용할 수 있는데, 메소드가 없을 때 함수를 실행하는 부분 뒤에 ?를 붙이면 된다. 

 

메소드 뒤( .() )가 없기 때문에 undifined를 반환

4. Null 병합 연산자 ( ?? )

좌측에 있는 게 존재하면 보여주고 아님 우측 출력

userLocation ?? "없는 위치"

논리합과 Null 병합 연산자 차이

논리합은 falthy, 병합은 null이나 undifined만

 

modules

캡슐화를 통해  내부에 있는 것을 숨기고 간결하게 어디에서든 사용할 수 있게 한 것.

export를 이용해서 다른 파일에서 사용할 수 있게 한다.

함수, 객체, 원시값을 의미한다.

내보낸다, 들여온다는 개념이 중요하다.

//add.js
export const add ~~~ 

//import.js
import {add} from ' ./add,js ;

 

코드 캡슐화와 충돌방지

전역변수 오염, 충돌 방지

필요한 기능만을 선택적으로 불러올 수 있다.

필요한 코드만 동적으로 로드할 수 있기 때문에 초기 로딩 시간을 단축시킴.

 

고급 모듈 기능

이름 바꾸기와 기본 내보내기

1. 별칭 사용

import { add as sqr } from ' ./add,js ;

 

2. 기본 내보내기와 가져오기

export default로 내보낼 수 있는 건 하나밖에 없다. 따라서 이름을 아무렇게나 적어도 된다.

//add.js
export default const add ~~~ 

//import.js
import adds from ' ./add,js ;

 

중괄호 없이 사용할 수 있으며 이름을 바꿔도 된다.

 

3. 전체 내용 가져오기

import * as MathFunctions from ' ./add,js ;

 

promise

비동기 작업의 '최종완료 또는 실패'를 나타내는 '객체'로, 비동기 작업이 수행될 때 그 결과값을 나중에 받기 위한 "약속"으로 사용된다.

promise는 세 가지 상태 중 하나를 가진다.

• Pending(대기중) : 응답을 받기 직전까지 계속 대기하고 있는 것/ 초기 상태로, 아직 성공 또는 실패가 결정되지 않은 상태
• Fulfilled(이행됨) : 연산이 성공적으로 완료되어 프로미스가 결과 값을 반환한 상태
• Rejected(거부됨) : 연산이 실패하거나 오류가 발생한 상태
  
  

promise 객체를 사용하면 결과에 따라서 계속 then, catch, finally 메소드를 이용해 연속적으로 결과를 처리할 수 있다. 이를 통해 콜백 지옥을 피할 수 있다.

const myPromise = new Promise(function(resolve, reject){
if (작업 성공) {
resolve ("Success");
} else {
reject("Failed");
}
});

//이렇게 설정된 promise는 then이나 catch로 사용할 수 있다,
//then은 성공한 경우, catch는 실패한 경우다

myPromise.then(function(value){
console.log(value); //Success
});

myPromise.catch(function(value){
console.log(value); //Failed
});

 

myPromise
.then(function(value){
console.log(value); //Success
});

.catch(function(value){
console.log(value); //Failed
});

async/await

async함수는 async 키워드를 함수 선언 앞에 붙여서 사용한다.
이 함수는 항상 Promise를 반환한다.

async function fetchData() {
  return 'Data loaded';
}
//async가 있기 때문에 promise 리턴

// 아래 코드와 같아요.
// async function fetchData() {
//  return Promise.resolve('Data loaded');
// }

fetchData().then(console.log); // 'Data loaded'

 

fetchData()는 promise부분이다.

await를 사용하면 프로미스의 완료를 기다리는 동안 함수의 실행을 일시적으로 중단한다. 프로미스가 해결되면 다시 실행된다.

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();
    console.log(json);
//1번이 돼야 2번, 2번이 돼야 콘솔로그 출력
  } catch (error) {
    console.error("Data loading failed", error);
  }
}

fetchData();

 

2번째 줄에 await 안 붙였을 때

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    const json =  data.json();
    console.log(json);//Promise {<pending>}
  } catch (error) {
    console.error("Data loading failed", error);
  }
}

fetchData();

위 코드는 기다리지 않고 그냥 실행됐기 때문에 json 내용이 아니라 Promise {<pending>}이 나온 것...