[TIL] D+51 리액트 입문 이틀차 + UI 과제 차력쑈

1️⃣ 리액트 입문

reduce 메소드부터 단축평가까지 ~

 

📌 배열 - reduce 

// reduce
const numbers = [1, 2, 3, 4, 5];

const result = numbers.reduce(function (누적된값, 일반값) {
  return 누적된값 + 일반값;
});

console.log("result =>", result);
// result => 15

 

메소드 이름은 reduce인데 왜 전체를 합한 값이 나오는 걸까 ...?

강의만으로는 이해가 안돼용...

 

그래서 챗지피티한테 reduce가 뭐냐고 물어봄

 

reduce는 배열의 모든 값을 하나로 "줄여주는" 역할을 한다! 

 

---

 

📌  배열 - sort

// sort
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
//[ 'Banana', 'Orange', 'Apple', 'Mango' ]
fruits.sort();
console.log(fruits);
//[ 'Apple', 'Banana', 'Mango', 'Orange' ]

const numbers = [40, 100, 1, 5, 25];
numbers.sort(function (a, b) {
  return a - b;
});

console.log(numbers);
//sort 안에 아무것도 안넣으면 요소들을 문자열로 가정하고 변환한다.(유니코드) //안에 비교함수를 넣어줘야한다. // a-b; 오름차순 정렬 b-a; 내림차순 정렬

 

sort는 새로운 배열을 만들지 않고 기존 배열을 정렬하기 때문에 원본 배열 자체가 변경된다.

그리고 숫자가 아닌 문자열(유니코드)을 기본으로 정렬한다.

그래서 숫자를 정렬하기 위해서는 비교함수를 사용해야한다.

 

const original = [3, 1, 4];
const sorted = original.slice().sort(); // 원본 배열은 그대로!
console.log(original); // [3, 1, 4]
console.log(sorted); // [1, 3, 4]

 

sort는 원본 배열을 변경한다는 점을 기억하자

정렬 전에 배열을 복사하고 싶다면 위와 같이 slice를 사용하라고 한다.

 

---

 

📌  Template Literals 

// Template Literals
// 템플릿 리터럴은 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법입니다.
const customer = {
  name: "르탄이",
};

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

console.log(
  "감사합니다." +
    customer.name +
    "님!" +
    item.name +
    "을(를)" +
    item.price +
    "원에 구매하셨습니다."
);

console.log(
  `감사합니다. ${customer.name}님! ${item.name}을(를) ${item.price}원에 구매하셨습니다`
);

 

템플릿 리터럴은 문자열을 연결하거나 여러 줄로 작성할 때 편리하게 사용할 수 있다.

백틱으로 문자열을 감싸서 작성한다.

 

두번째 줄이 템플릿 리터럴 기능을 사용한 것인데

코드 작성할 때도 편하고 결과값도 훨씬 보기 좋다 ~.~

---

 

📌  Destructuring(구조 파괴!!!)

// Destructuring => 구조 파괴,,
// De : not
// structuring : 구조
const item = {
  name: "커피",
  price: 4000,
};

// const name = item.name;
// const price = item.price;
const { name, price } = item;

console.log("name =>", name);
console.log("price =>", price);

//리액트에서 많이 쓰이는 형태
function greet({ name, age }) {
  console.log(`안녕하세요. 제 이름은 ${name}입니다. 나이는 ${age}에요.`);
}

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

greet(person);

 

코드 작성할 때도 편하고 결과값도 훨씬 보기 좋다 ~.~

---

📌  화살표 함수

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

console.log(add(5, 3));  // 8

//위 코드를 화살표 함수로 쓰면 아래와 같다.

const add = (a, b) => a + b;
console.log(add(5, 3));  // 8

// multi-line일 경우
const sampleLogging = () => {
	const name = "르탄이";
	const age = 20;
	console.log(`안녕, ${name}`);	
	
	return age + 1;
}

 

화살표 함수는 간결한 문법으로 함수를 선언할 수 있다.

함수의 내용이 여러줄인 경우에는 중괄호와 return문을 꼭 명시해주어야한다.

 

 

---

📌  삼항 연산자 (조건 연산자)

// 조건연산자 = 삼항연산자
const score = 85;
let grade = "";

if (score >= 80) {
  grade = "A";
} else {
  grade = "B";
}

//위 코드를 아래와 같이 간단하게 바꿀 수 있다.

const score = 85;
const grade = score >= 80 ? "A" : "B";

 

 

이렇게 항이 3개이기 때문에 삼항 연산자라고 부른다.

 

---

📌  단축 평가(short-circuit evaluation)

논리 연산자를 사용하여 조건문을 처리할 때,

전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식

 

1.논리합 연산자 ||

좌변의 피연산자가 falsy값일 때만 우변의 피연산자를 평가한다.

좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며 우변은 평가되지 않는다.

// 유저 정보가 제공되지 않았을 때 기본 이름 제공
function getUsername(user) {
    return user.name || '신원미상';
}

console.log(getUsername({ name: '르탄이' })); //르탄이
console.log(getUsername({})); //신원미상

 

2.논리곱 연산자 $$

좌변이 truthy일 때만 우변을 평가한다.

조건에 따라 특정 코드를 실행하고자 할 때 유용하다.

// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = '르탄이';
loggedIn && console.log('환영합니다! ' + username); //환영합니다! 르탄이

loggedIn = false;
loggedIn && console.log('환영합니다! ' + username); //아무것도 출력되지 않음

 

3.Optional Chaining ?.

객체의 속성에 접근할 때 해당 경로에 속성이 존재하지 않아도 에러를 발생시키지 않는다.

대신 undefined를 반환한다.

오류를 발생시키지 않기 때문에, 객체의 중첩된 속성에 안전하게 접근할 수 있다.

const user = {
    profile: {
        name: "르탄이",
        details: {
            age: 30,
            location: "서울시 강남구"
        }
    }
};

//Optional Chaining을 사용하여 에러 발생 방지
console.log(user.profile?.details?.age); // 출력: 30

//하나라도 undefined나 null이면 ?.연산자는 그 시점에서 평가를 멈추고 undefined를 반환한다.
const user = {};
console.log(user.profile?.details?.age);  // 출력: undefined

// 메소드 호출에서도 사용할 수 있다.
// 객체가 메소드를 가지고 있지 않은 경우에도 안전하게 메소드 호출 가능
const result = user.profile?.getDetails?.(); 
// user.profile.getDetails가 존재하지 않으면 undefined 반환

 

 

4.Null 병합 연산자??

좌변이 null이나 undefined일 경우에만 우변을 평가한다.

null 또는 undefined가 아닌 falsy 값들을 유효한 값으로 처리하고 싶을 때 사용한다.

// 사용자의 위치 설정이 없으면 기본 위치를 제공
let userLocation = null;
console.log(userLocation ?? 'Unknown location');  // 출력: Unknown location

userLocation = 'Seoul';
console.log(userLocation ?? 'Unknown location');  // 출력: Seoul

// 사용자 입력이 0인 경우에도 0을 유효한 값으로 취급
const temperature = 0;
console.log(temperature ?? 25);  // 출력: 0

 

단축평가 이거 진짜 어렵넴...🫠

 

---

2️⃣ 디자인 집중반

UI 집중반 개인 과제 - 요청사항에 부합하는 화면 디자인 완성하기

 

어제 약 2시간 정도 써서 와이어프레임 80% 정도 완성...ㅎㅎ;;;

완성본까지 ... 2시간은 턱없이 부족할 것 같은데...

나는 ... 그냥 권장 시간 내에 할 수 있을 만큼 하는 것을 선택했다^_^