내일배움캠프 - 12/30 TIL (ReactJs 입문)

ReactJs 기초(1) let, const, var

let numberOfUsers = 50; // numberOfUsers라는 '변수' 선언 + '50'이라는 숫자 할당
numberOfUsers = numberOfUsers + 5; // 재할당
// numberOfUsers += 5;
console.log("Total users: " + numberOfUsers); // 출력: Total users: 55 이게 재활용!!

 

변수 : 복잡성과 재사용성을 증진시키기 위해 사용한다. 

변수의 종류 : let, const, var(var는 사용 안 하는 것 추천)

스코프에 따른 분류 : 글로벌 스코프(어디서든 사용 가능), 블록 스코프{}, 함수 스코프 function(){}

블록 스코프 변수(let, const)는 선언된 블록 내에서만 접근할 수 있고, 함수 스코프 변수(var)는 선언된 함수 내에서 유효합니다.

visible inside this block, available only in this block = 즉 let으로 선언한 블럭은 블럭 안에서만 접근 가능하다!

var로 바꾸니까 오류 없어진 것을 볼 수 있음

 

재할당은 : let, var는 가능하지만 const는 불가능! 

const : 상수 선언, 값이 변경되지 않는 변수여서 코드 안정성이 높다! 

• 블록 스코프를 갖기 때문에 선언된 블록 내에서만 유효함! 

let :  변수의 값을 유연하게 변경 가능 

• const와 마찬가지로 블록 스코프를 따름!

const vs let을 잘 고르는 팁

변수 선언은 가장 먼저 const를 떠올리고 재할당이 필요한 경우만 let을 떠올릴 것 ! 

 

<var를 사용해서는 안 되는 이유>

호이스팅 문제도 있음 : 인터프리터(한 줄씩 읽어 내려가며 실행하는 프로그램)이기 때문에 코드를 항상 아래에서 위로 읽는다. 1번째줄 입장에서 두번째 줄을 안 갔으니 myVar는 없는 변수여야 한다. 즉, myvar가 선언되기 전에 찾으면 ReferenceError가 떠야 하는데 var는 undefined가 뜸.

*호이스팅 : 선언된 변수들이 코드상 실제로 이동하진 않지만 최상위로 끌어올려진 것처럼 동작하는 것 

console.log(myVar); // undefined, not ReferenceError
var myVar = 10;

원래는 reference error가 뜨는게 맞음

https://velog.io/@remon/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85hoistingvar%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90

호이스팅(hoisting)_var의 문제점

---

객체와 배열

객체 : key, value의 쌍으로 구성된 데이터 타입

객체 접근

attribute라는 변수를 주는 괄호 표기법에 대한 설명 

 

 

추가, 수정, 삭제

리액트에서는 state라는 개념을 사용하기 때문에 위의 예시와 같이 직접적으로 객체의 속성을 삭제하거나 수정하는 대신, 상태를 불변하게 유지하는 방법을 선호합니다. 따라서 아래의 방법은 참고삼아서만 알아두기!
🙂

 

배열 : 배열은 같은 타입의 여러 데이터를 하나의 변수에 순차적으로 저장하기 위해 사용

배열에 접근과 수정

object.keys, object.values, entries, object.assign

entries : Key와 Value를 쌍으로 배열해주는 것

Object.assign : 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다.

배열(접근, 수정)과 배열(push, pop)

push : 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새 길이를 반환합니다.

pop : 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.

map 

• React에서 불변성 : 데이터를 직접 변경하지 않고 새로운 데이터를 만들어 사용하는 것 
• push, pop, sort와 같은 배열 메서드들은 원래 배열 자체를 변경하지만, map은 원래 데이터는 그대로 유지됨 
• 동적으로 UI 요소를 그려주는 역할을 React.js에서 많이 다루게 됨. 따라서 map 함수를 반드시 사용해야함! 

const fruits = ["사과", "바나나", "딸기"];

const juices = fruits.map(fruit => fruit + " 주스");
console.log(juices); // ["사과 주스", "바나나 주스", "딸기 주스"]

 

filter

• 배열에서 특정 조건을 만족하는 요소들만 걸러내어 새로운 배열을 생성하는 역할. 

const 새로운배열 = 원래배열.filter(콜백함수);

filter

💡 map과 filter의 차이점

map : 각 요소에 변형을 가하여 같은 개수의 요소를 가진 새로운 배열을 생성 
filter : 특정 조건을 만족하는 요소만 걸러내어 원래 배열보다 같거나 적은 개수의 요소를 가진 새로운 배열을 생성 
즉, map은 갯수로 따진다면 이전 배열 = 새로운 배열  / filter는 이전 배열 > = 새로운 배열

 

reduce : 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과물을 누적시켜 반환함!

reduce 함수는 JavaScript 배열 메서드 중 하나로, 배열의 모든 요소를 순회하면서 하나의 결과값으로 "줄여나가는" 역할을 합니다. 마치 긴 줄에 꿰어져 있는 구슬들을 하나씩 꿰어서 하나의 목걸이로 만드는 것과 비슷하다고 생각하면 됩니다.

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 15

 

sort : 배열의 요소를 적절한 위치에 정렬하고, 배열을 반환함 

• 기본적으론 문자열로 변환된 요소들은 각각의 유니코드 코드 포인트에 따라 정렬.
• 숫자 정렬 시 예상치 못한 결과를 초래할 수 있기 때문에, 숫자 정렬 시엔 정렬 순서를 정의하는 비교 함수를 제공해야함 

// 숫자 배열 정렬
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 5, 25, 40, 100]
//a - b => 오름차순 

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers);  // [100, 40, 25, 5, 1]

 

---

Template Literals, Destructuring, Seperate Operator

` 백틱은 어떻게 쓰는가.. : opt + ₩

template literals : 템플릿 리터럴은 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법입니다.

• template literals를 사용하지 않는다면?

let customer = { name: "르탄이" };
let item = { name: "커피", price: 4000 };
console.log("감사합니다, " + customer.name + "님. " + item.name + "을(를) " + item.price + "(원)에 구매하셨습니다.");
// 출력: 감사합니다, 르탄이님. 커피을(를) 4000(원)에 구매하셨습니다.

• template literals를 사용한다면?

let customer = { name: "르탄이" };
let item = { name: "커피", price: 4000 };
console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);
// 출력: 감사합니다, 르탄이님. 커피을(를) 4000(원)에 구매하셨습니다.

 

Tap과 줄바꿈 문자("\n")의 차이 
안녕하세요. 저는 Gemini입니다. // 탭은 공백으로 처리됨
잘 부탁드립니다. // "\n"에 의해 새로운 줄로 분리됨

 

Destructuring : 객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해주는 문법 

Destructuring

* ${person, name} 순서는 바뀌어도 상관 없음!

💡 특히 이 패턴은 리액트 컴포넌트에서 정말 많이 사용한답니다. 꼭 기억해두도록 합시다.

객체 Destructuring에서는 obj안의 ‘key’를 그대로 사용하여 분해한다는 것 또한 아주 중요한 개념이에요. 순서가 아님 역시 꼭 기억하도록 해요!

 

배열의 요소를 위치에 따라 변수로 할당하기

---

ux 집중반 유저리서치 페이지 제작

설문조사랑 voc를 합쳐서 유저 리서치 페이지로 다시 만들었다..! 

---

👍  잘한 점

• 오늘은 강의록+vs code+티스토리 다 켜놓고 내용을 하나하나 정리해가면서 강의를 따라갔는데 확실히 이해가 쉬웠다! 그리고 강의도 자바 스크립트 문법보다 이게 훨씬 이해가 잘 되는 것 같다.

😦  아쉬운 점 

• 1,2,3,6 들으라고 되어 있었는데 12345 듣고나서 6 들어야 하는거 깨달았다 ㅋㅋㅋ.....

✅  앞으로 해야할 것

• 내일은 강의 6까지 듣고 복습해봐야지 ! 그리고 배운 내용들 활용해서 문제 풀 수 있는 사이트 가서 문제 풀어봐야쥐...
• UX 리서치 내일 오후에 2시간 동안 추가적으로 진행해야할 듯 하다!