ReactJS 기초

1. let, const, var

let과 const는 블록스코프로 안전한 프로그래밍이 가능: 선언된 블록 내에서만 접근할 수 있음

const vs let을 잘 고르는 팁!

const를 먼저 떠올리고 만약 변경될 여지가 있다면 그때 let

2. 객체, 배열

객체: key - value

객체 접근: 점 표기법(.), 괄호 표기법

// 객체 접근: 점 표기법(.)
console.log(user.name);
console.log(user.age);
user.printHello();

// 객체 접근: 괄호 표기법
const attribute = "name";
console.log(user[attribute]);

 

객체에 속성 접근

user.email = "jay@gmail.com"; // 객체 속성 추가
user.age = 31; // 객체 속성 수정
delete user.isAdmin; // 객체 속성 삭제

배열

// 배열
const numbers = [1, 2, 3];
console.log(numbers);

console.log(numbers[1]); // 2 출력
numbers[1] = 10;
console.log(numbers[1]); // 10 출력

Map

: 원본 배열에서 각 요소를 가공한 새로운 배열을 리턴하는 함수

1) 배열 내의 모든 요소 각각에 대해

2) 주어진 함수를 호출한 결과를 모아

3) 새로운 배열을 반환(원본배열의 갯수만큼 돌아 리턴함, 리턴문이 없으면 undefined를 할당)

 

 Filter

: 주어진 함수의 테스트를 통과하는 모든 요소를 새로운 배열로 만듬

 

Reduce

: 배열의 각 요소에 대해 주어진 함수를 실행하고 결과물을 누적해서 반환 (매개변수 2개를 받음)

 

Sort

: 정렬을 위한 함수, 원본 배열 자체를 바꿈

 

3. Template Literals, Destructuring, Seperate Operator

Template Literals 

: 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법  ``

// 템플릿 리터럴 사용 전
console.log("감사합니다. " + customer.name + "님!" + item.name + "을(를)" + item.price + "원에 구매하셨습니다.");

// 템플릿 리터럴 사용 후
console.log(`감사합니다. ${customer.name}님! ${item.name}을(를 ${item.price}원에 구매하셨습니다.`);


// 템플릿 리터럴 사용 전
const orderDetails1 = "고객: " + customer.name + "\n" + "상품: " + item.name + "\n" + "가격: " + item.price;
console.log(orderDetails1);

// 템플릿 리터럴 사용 후
const orderDetails2 = `
고객: ${customer.name}
상품: ${item.name}
가격: ${item.price}
`;
console.log(orderDetails2);

Destructuring

const item = {
  name: "커피",
  price: 4000
};

// Destructuring 전
const name = item.name;
const price = item.price;
console.log("name => ", name);
console.log("price => ", price);

// Destructuring 후
// 위와 같이도 가능하나, 만약 해야할 작업이 5만개라면....
const { name, price } = item; // item으로부터 name, price를 찢어 놓겠다.
console.log("name => ", name);
console.log("price => ", price);

 

배열의 Destructuring: 배열은 key가 없기때문에 Index(요소의 위치)를 기반으로 변수를 할당한다.

const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors; // colors로부터 firstColor, secondColor를 지정함
console.log(firstColor); //  red
console.log(secondColor); //  green

// 만약 blue만 필요하다면
const [, , thirdColor] = colors; // 첫번째 두번째 요소는 아무것도 하지 않고 세번째만 저장한다.
console.log(thirdColor); // blue

 

Spread Operators 

(1) 복제

const originalUser = {
  name: "르탄이",
  age: 28
};

// 참조하는 위치를 복사한 것일 뿐 updatedUser에 originalUser가 복사된 것이 아님
const updatedUser = originalUser;
updatedUser.name = "르순이";
console.log("원본 =>", originalUser); // 원본 => { name: '르순이', age: 28 }
console.log("복사본 =>", updatedUser); // 복사본 => { name: '르순이', age: 28 }

// 원본까지 르순이로 변경됨: 불변성이 깨지는 현상

const updatedUser2 = { ...originalUser }; // originalUser ...으로 찢어놓음 -> 중괄호{}가 벗겨지기 때문에 다시 중괄호를 씌움

 

(2) 배열이나 객체를 합칠 때도 사용 가능

const first = [1, 2, 3];
const second = [4, 5, 6];
const combinedArray = [...first, ...second]; // [1, 2, 3, 4, 5, 6]
console.log(combinedArray);

Rest Operators 

: 나머지 값을 활용해서 어떤 연산을 하는 프로세스, Spread Operators와 비슷하다

 

...변수명

언제사용?

1) 함수의 매개변수

2) 객체분해할당 시 여러값을 그룹핑

 

함수의 매개변수

function sum(numbers) {
  return numbers.reduce((acc, cur) => acc + cur);
}
const result1 = sum([1, 2, 3, 4, 5]);
console.log(result1); // 15


function sum(...numbers) {
  console.log("Here => ", numbers); // Here =>  [ 1, 2, 3, 4, 5 ] 배열의 형태로 반환
  return numbers.reduce((acc, cur) => acc + cur);
}
const result3 = sum(1, 2, 3, 4, 5); // 배열을 넣은 적이 없으나 ... rest operator에 의해서 배열로 반환됨
console.log(result3); // 15

 

// 객체 분해 할당 시 여러값 그룹핑
const person = {
  name: "John",
  age: 30,
  country: "USA",
  occupation: "Developer"
};

// occupation을 제외한 name, age, country만 하나의 객체의 담고 싶다면,
const { occupation, ...rest } = person;
console.log("rest = > ", rest); // rest = >  { name: 'John', age: 30, country: 'USA' }

4. Arrow Function, Conditional Operator, Short Circuit Evaluation

화살표 함수

const add1 = function (a, b) {
  return a + b;
};

console.log(add1(1, 3)); // 4

// 첫 번째 방법
const add2 = (a, b) => {
  return a + b;
};
console.log(add2(1, 3)); // 4

// 두 번째 방법: 리턴문이 한 줄일 경우 {}와 return을 빼고 사용 가능
const add3 = (a, b) => a + b;
console.log(add3(1, 3)); // 4

 

조건 연산자 = 삼항연산자

const score1 = 85;
let grade1 = "";

if (score1 >= 80) {
  grade1 = "A";
} else {
  grade1 = "B";
}
console.log(grade1); // A

// 아래와 같이 변경 가능, 처음 값 할당할 때 아예 A나 B를 할당해버리기 때문에 변수let이 아닌 상수 const로 표현가능
const grade2 = score1 >= 80 ? "A" : "B"; // score2가 80보다 같거나 크니? 같으면 A를 그게 아니면 B를 반환해줘
console.log(grade2); // A

 

논리합연산자(||)

truthy, falsy

falsy: false, 0, "", null, undefined, NaN

const getUserName1 = (user) => {
  if (!user.name) {
    // user.name이 falsy한 값일 경우
    return "신원미상";
  }
  return user.name;
};

const person = {
  age: 30
};
console.log(getUserName1(person)); // 신원미상 출력

// 아래와 같이 표현식 사용 가능: user.name이 falsy한 값일 경우 "신원미상" 출력
const getUserName2 = (user) => {
  return user.name || "신원미상";
};
console.log(getUserName2(person)); // 신원미상 출력

// 아래와 같이 줄일 수 있음: 리턴문이 하나이기 때문에 중괄호{}와 return 키워드 생략 가능
const getUserName3 = (user) => user.name || "신원미상";
console.log(getUserName3(person)); // 신원미상 출력

 

논리곱연산자(&&)

const loggedIn = true;
const userName = "르탄이";

// 좌변이 truthy일 때만 &&의 우변을 실행한다.
loggedIn && console.log(`환영합니다. ${userName}님!`);

// optional chaning
const user = {
  profile: {
    name: "르탄이",
    details: {
      age: 30,
      location: "서울시 강남구"
    }
  },
  printHello: () => console.log("Hello")
};

console.log(user.profile.details.age); // 30 출력
// console.log(user.profile2.details.age); // 오류: Cannot read properties of undefined (reading 'details')
console.log(user.profile2?.details.age); // undefined 출력
user.printHello(); // Hello 출력

user.printHello1?.(); // 아무것도 출력하지 않고 끝남

const result = user.printHello1?.();
console.log(result); // undefined 출력

 

Null 병합 연산자(??)

 

: 좌변이 null이나 undefined일 때만 우변을 평가함

let userLocation = null;
console.log(userLocation ? userLocation : "없는위치"); //  없는위치 출력

// 동일한 표현을 같이 쓰는게 의미가 없기 떄문에 좌측의 userLocation이 존재하면 보여주고 존재하지 않으면 연산자 ??의 우측을 보여줌)
console.log(userLocation ?? "없는위치"); //  없는위치 출력

// 다른 예제
function displayPreferences(preferences) {
  // `||` 연산자 사용 예
  // 좌측의 preferences.textLength의 값이 0으로 되있었으나, 0은 falsy한 값이기 떄문에 우측이 평가되어 50이 나옴
  const textLength = preferences.textLength || 50; // textLength가 0일 경우 50이 할당 됨
  console.log(`Text Length: ${textLength}`); // Text Length: 50 출력

  // `??` 연산자 사용 예
  // 좌측의 preferences.itemsPerPage가 null 또는 undefined일 때만 우측을 평가하기 때문에 10이 할당 됨
  const itemsPerPage = preferences.itemsPerPage ?? 10; // itemsPerPage가 null 또는 undefined일 때만 10이 할당됨
  console.log(`Items Per Page: ${itemsPerPage}`); // Items Per Page: 10 출력
}

 

5. Modules

: 재사용 가능한 코드 조각을 캡슐화하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게 해줌

 

1. export 키워드를 사용하여 모듈을 만들고 다른파일에서 아용할 수 있게 함 (다른 파일에서 import 하여 사용)

 

2. 모듈을 사용하는 이유

 2.1 명확한 종속성 관리(파일 로딩 순서를 신경쓸 필요X)

 2.2 코드 충돌 방지

 2.3 효율적인 코드 로딩

6. Async / Await

Promise

: javaScript에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체

onst myPromise = new Promise(function (resolve, reject) {
  if (false) {
    resolve("Success!");
  } else {
    reject("Failed.");
  }
});

myPromise
  .then(function (value) {
    console.log(value); // if(true)이면 Success! 출력
  })
  .catch(function (value) {
    console.log(value); // Failed. 출력
  });

 

Async 함수

: 항상 Promise 반환

 

Await

: 프로미스의 완료를 기다리는 동안 함수의 실행을 일시적으로 중단하고 해결되면 함수 실행을 자동 재개 (비동기코드를 동기적표현 가능)

async function fetchData() {
  try {
    const data = await fetch("https://jsonplaceholder.typicode.com/posts");
    const json = await data.json();
    console.log(json);
  } catch (error) {
    console.error("Data loading failed", error);
  }
}

fetchData();