[TIL] D+50 리액트 입문 시작

1️⃣ 리액트 입문

 

변수의 종류부터 객체와 배열까지

 

📌 변수가 필요한 이유

1) 데이터 저장 및 관리의 필요성

변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 해준다.

사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야할 때 효율적으로 할 수 있다.

 

2) 프로그램의 복잡성 관리

변수가 없을 경우,직접 값을 기입해야하므로 코드의 복잡성이 증가하고 오류 가능성이 높아진다.

프로그램의 확장성과 유지보수성이 떨어질 수 있다.

변수를 사용하면 코드의 가독성이 높아지고, 수정하기에도 용이하다.

 

3) 재사용성 및 유지보수 향상

변수를 통해 정의된 데이터 값을 여러 위치에서 재사용함으로써 코드의 재사용성을 높일 수 있다.

변수를 사용함으로써 프로그램의 유연성,효율성,확장성을 동시에 증진시킬 수 있다.

---

📌 변수의 종류와 분류 방식

자바스크립트의 변수는 let, const, var가 존재한다.

 

<스코프에 따른 분류>

변수는 선언되는 위치에 따라 다른 스코프를 가지는데,

자바스크립트의 주요 스코프 유형은 글로벌 스코프,블록 스코프,함수 스코프이다.

글로벌 변수는 전체 코드에서 접근 가능

블록 스코프 변수(let, const)는 선언된 블록 내에서만 접근 가능

함수 스코프 변수는(var)는 선언된 함수 내에서 유효하다.

 

<재할당 가능성에 따른 분류>

변수는 또한 그들이 재할당될 수 있는지 여부에 따라 분류될 수 있다.

const는 값을 재할당할 수 없는 상수를 선언할 때 사용되며, 초기선언 이후 그 값을 변경할 수 없다.

반면 var와 let은 값을 재할당할 수 있다.

 

---

📌 const, let

const - 1)상수 선언의 중요성

const를 사용하여 상수를 선언하면, 프로그램 내에서 값이 변경되지 않는 변수를 명확하게 표현할 수 있다.

코드의 안정성을 높이고, 의도치 않은 값 변경으로 인한 버그를 예방할 수 있기 때문에

올바른 상수를 사용하는 것은 매우 중요하다.

 

const - 2)블록 스코프와 안전한 프로그래밍

또한 const는 블록 스코프를 갖기 때문에 선언된 블록 내에서만 유효하다.

스코프를 이해한 상태에서 개발을 하면 예측 가능한 코드를 작성할 수 있기 때문에 안전하다.

 

let - 1)변수의 유연한 관리

let을 사용하면 변수의 값을 필요에 따라 유연하게 변경할 수 있다.

계산이나 조건에 따라 변할 수 있는 값을 사용해야할 때 적합하다.

 

let - 2)블록 스코프의 이점

let 또한 블록 스코프를 따른다.

이는 변수를 블록 내부에서만 사용하도록 함으로써 외부에서의 접근을 제한다고,

변수의 충돌을 방지하여 프로그램의 안정성을 높이게 된다.

 

변수 선언은 const를 사용하고 재할당이 필요한 경우만 let을 사용하자!

---

📌 var 사용을 지양해야 하는 이유

함수 스코프를 가지는 var

var는 함수 스코프를 가지며 함수 내부 어디에서든 접근할 수 있다.

때때로 예상치 못한 범위에서 변수가 접근 가능하여 문제를 일으킬 수 있다.

 

호이스팅 문제

var로 선언된 변수는 선언 전에도 참조가 가능한 호이스팅 현상으로 인해 코드를 혼란스럽게 만들 수 있다.

 

<var를 사용하면 안되는 이유>

 

1) 범위 관리의 어려움

var로 선언된 변수는 예상치 못한 범위에서 사용될 수 있어 버그를 일으킬 수 있다.

블록 스코프를 가지는 let과 const는 이러한 문제를 해결하여 더 안전한 코드 작성이 가능하다.

 

2) 코드의 가독성과 유지보수성 저하

var 사용으로 인한 호이스팅과 함수 스코프 특성은 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게한다.

현대적인 자바스크립트 개발에서는 let과 const를 사용하여 변수의 범위와 재할당 가능성을 명확이 구분하는 것이 권장된다.

---

📌 객체와 배열

// 객체 : key - value
// JSON(JavaScript Object Notation)

const user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
  printHello: () => console.log("hello"),
};

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

// 객체 접근: 점 표기법(.)
console.log(user.name);
console.log(user.age);
user.printHello();
// 결과값: 르탄이 30 hello


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

 

리액트에서는 state(변수)에 값을 저장할 때 위와 같은 방식을 사용하지 않는다.

원래는 불변성을 이용해서 값을 저장하는 방식을 취하는데 위 예시는 불변성이 깨진 상태라고 한다.

지금은 잘 이해 안되지만 우선 알고 넘어가자!

// 배열
const numbers = [1, 2, 3];


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

 

배열을 만드는 방법과 요소에 접근하는 방법...?ㅎㅎ

 

// 객체
const user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
};

// (1) Object.keys()
const keys = Object.keys(user);
console.log(keys);
// [ 'name', 'age', 'isAdmin' ]

// (2) Object.values()
const values = Object.values(user);
console.log(values);
// [ '르탄이', 30, true ]

// (3) entries
const entries = Object.entries(user);
console.log(entries);
// [ [ 'name', '르탄이' ], [ 'age', 30 ], [ 'isAdmin', true ] ]

// (4) assign : 원본 객체에 추가적인 객체의 속성을 복사
const userDetails = {
  occupation: "개발자",
};
Object.assign(user, userDetails);
console.log(user);
// { name: '르탄이', age: 30, isAdmin: true, occupation: '개발자' }

 

 

key와 value를 각각 불러오는 방법과 => Object.keys()Object.values()

key - value 세트를 불러오는 방법 => Object.entries()

그리고 새로운 객체 속성을 넣는 방법 => Object.assign()

 

// 배열
// push, pop
const fruits = ["Apple", "Banana"];
console.log(fruits); 
// [ 'Apple', 'Banana' ]

// orange를 추가
fruits.push("Orange");
console.log(fruits);
// [ 'Apple', 'Banana', 'Orange' ]

// orange를 빼기
const lastFruits = fruits.pop();
console.log("---");
console.log(lastFruits); 
console.log(fruits); 
// ---
// Orange
// [ 'Apple', 'Banana' ]

 

자바스크립트 문법 때도 배웠던 push와 pop

 

// map: 원본 배열에서 각 요소를 가공한 새로운 배열을 리턴하는 함수
// 1) 배열 내의 모든 요소 각각에 대해
// 2) 주어진 함수를 호출한 결과를 모아
// 3) 새로운 배열을 반환

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(function (num) {
  return num * num;
});

console.log(squared);
//[ 1, 4, 9, 16, 25 ]

 

위 코드에서 return을 까먹고 안적었을 경우

출력값은 [undefined, undefined, undefined, undefined, undefined] 

맵은 원본 배열의 개수만큼 하나씩 체크하여 값을 출력한다는 것을 알 수 있다.

 

//filter
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});

console.log(evenNumbers);
// [2, 4]

 

filter 메소드는 배열에서 특정 조건을 만족하는 요소들만 골라 새로운 배열을 만드는 도구.

원래 배열 중에서 필요한 것들만 필터링해서 뽑아낼 때 사용한다.

 

reduce 메소드는 이해가 안가서...

내일 3강 reduce 부분부터 다시 보도록 해야지

 

---

2️⃣ 디자인 집중반

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

 

오늘,내일 과제 권장 2시간씩인데... 총 4시간 안에 완성할 수 있을까?

시간을 더 써서 완성을 할지, 아니면 정말 4시간만 쓴 결과물을 낼지 고민된다.

 

우선 와이어프레임까지는 완료 ~ ..

 

---

느낀 점, 새롭게 깨달은 것💡

- 흠 ... 나 디자인을 하고싶은게 맞나 고민이 든다

오늘의 잘한 점🥰

- 출석 완료!!! 

오늘의 문제점,부족한 것😵‍💫

- 어제 늦게 잤더니 피곤해서 오전에 많이 쉬었다...

해결방법👊

- 이제 늦잠 금지 !!!