[Udemy:React] Section1~2: JS 복습

📼 Udmey: React 완벽 가이드 2024 with React Router & Redux

취준 때(약 2년 전쯤) 구매해서 들었던 Udemy React 강좌가 작년 10월쯤에 강의 내용 대부분이 업데이트가 되었다고 해서 초심 찾을 겸 다시 듣기 프로젝트 !

얼렁뚱땅 1년 4개월차 프론트 개발자가 되었지만 막상 코드 로직 원리를 누군가에게 설명해줄 수 있을 만큼 기초를 잘 알고 있다고 생각하진 않아서 첨부터 꾸준히 완강해보기로,,

(사실 유데미 리액트 강의 재완독 2024 연초 목표였는데 벌써 2024년 반년 훌쩍 넘은 시점에 듣기 시작,, 🥲)

Section1: 시작하기

React란? 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리 즉, 사용자 인터페이스 구축을 위한 JS 라이브러리

✋ JS: 명령형으로 코드 작성 vs React: 선언형으로 코드 작성

💡 TIP !
브라우저 창에 react.new 를 검색하면 자동으로 CodeSandbox의 new reat project playground가 생성된다

✅ vite로 new react project 생성하기

npm create vite@lastest [project_name]
npm run dev

---

Section2: 자바스크립트 새로고침

✅ JS 파일 import하기

<script src="assets/scripts/app.js" defer type="module"></script>

defer
: HTML 문서를 읽어와 파싱한 후 스크립트가 import되고나서 실행되도록 하는 속성
⇒ 자바스크립트 코드가 실행되기 시작할 때 HTML 요소가 이미 로드되도록 보장

• src 속성이 명시된 경우에만 사용 가능하며, <script> 요소가 외부 스크립트를 참조하는 경우에만 사용 가능 !
• defer 속성이 없을 경우 바로 실행

type=”module”
: 해당 스크립트 파일을 자바스크립트 모듈로 취급 (import, export 사용 가능)

---

✅ React의 빌드 프로세스

React에서는 빌드 프로세스를 사용한다
⇒ 이말즉슨, 작성한 코드가 그대로 실행되는게 아니라 그 전에 내부적으로 코드가 수정된다는 뜻
⇒ 이 과정에서 빌드시 자동으로 script 태그를 html 파일에 추가해준다

1. 뒤에서 소스 코드 확인
2. 소스 코드 변환
3. HTML 파일 수정
4. script 요소 추가
5. 변환된 소스 코드 로드
6. 웹페이지에선 변환된 소스 코드 실행

🙋‍♀️ 그럼 왜 React에선 빌드 프로세스를 사용하는걸까?

📢
1) 리액트 코드에는 JSX 코드도 포함되어 있어서 처리되지 않은 리액트 본연의 코드는 브라우저에서 사용이 불가하기 때문!
2) 리액트 코드는 production을 위한 최적화가 이루어지지 않았기 때문!
⌞ 그러므로 빌드 프로세스를 통해 변수 이름 단축 및 공백을 제거하여 웹사이트 방문자가 다운로드해야 하는 코드의 양을 최적화함

---

✅ import & export

1️⃣ default export

// 파일별 오직 하나의 default export 존재 가능
export default 'AComponents';

// default export의 경우 {} 중괄호 없이 import
import AComponents from './util.ts'

2️⃣ named export

export const BComponents = () => {...}

import { BComponents } from './util' // 동일 폴더 내 다른 파일 import 하는 경우의 import path

💡 React에서 import 파일명 작성시 확장자명 제거 가능 ! ← 빌드 프로세스에서 자동으로 확장자명 추가해주므로

3️⃣ as import

import * as util form './util.js';
import { apikey as ak } from './util.ts'

👀 하나의 파일은 오직 하나의 default exports와 무한한 named exports를 가질 수 있다

---

✅ 변수

‣ 변수를 사용하면 좋은 점 ❗️ 값 재사용성 ↑ ❗️ 코드 가독성 ↑ ❗️
‣ 변수명, 함수명은 보통 camelCase로 작성
‣ const 값 재할당 불가(read-only) vs let 값 재할당 가능

---

✅ 함수

‣ parameter default value

// default 값 지정 가능
function createGreeting(username, message = "Hello!") {
	return "Hi, I am" + userName + message;
}

// message의 default값이 존재하므로 생략 가능
const greeting1 = createGreeting("Max");
// ‣ Hi, I am Max Hello!

// message 값을 따로 선언해줬으므로 default값을 override
const greeting2 = createGreeting("Manuel", "Hello, what's up?");
// ‣ Hi, I am Manuel Hello, what's up?

‣ arrow function

// 익명 함수 (주로 화살표 함수 사용)
export default function() {...} // 기본 함수
export default () => {...} // 화살표 함수 -> function 키워드 작성 안해도 되서 좀 더 간단!

// 화살표 함수에 매개변수가 없으면 괄호 생략 X
export default () => {...}

// 매개변수가 하나만 있는 경우에만 괄호 생략 O
export default username => {...}

// 매개변수가 두 개 이상 있는 경우엔 괄호 생략 X
export default (userName, userAge) => {...}

// 화살표 함수에 반환문만 존재하는 경우, return과 {} 생략 O
const callMe = number => number * 3;
                                       
// 객체 반환시 추가 괄호() 내 객체 작성
const callMe = number => ({ age: number })

// ❌ 중괄호만 생략, return 작성하는 경우 error!! ❌
const callMe = number => return number * 3;

---

✅ 객체 & 클래스

‣ 객체

const user = {
	name: 'MAX',
	age: 26,
	greet(userName) {
		console.log(this.age); // 26
	}
}

user.greet();

‣ 클래스

class User { // 클래스명은 대문자로 시작
	// 생성자 함수
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	greet() {
		console.log('Hello!');
	}
} // 구식 old 구문

// ----------------------------

// 최신 new 구문
class User {
	name = 'Max';
	age = 26;	
}

// ----------------------------

// new 객체 생성
const user1 = new User('Manuel', 35);
user1.greet(); // Hello!

---

✅ 배열

주로 값 목록 지정할 때 사용

‣ findIndex

const hobbies = ['Sports', 'Cooking', 'Reading'];

// 함수를 입력 받음
const index = hobbies.findIndex((item) => {
	return item === 'Sports';	
});
// ‣ 0

// {}, return 생략해서 좀 더 간단히 작성하는 방법
const index = hobbies.findIndex((item) => item === 'Sports'); // ‣ 0

‣ map ⭐️

목록 내용물 출력 및 데이터를 jsx 요소로 매핑할 때 등 사용
✋ 기존 배열 수정 ❌, 새 배열 반환 ⭕️

const editedHobbies = hobbies.map((item) => item + '!');
const editedHobbies = hobbies.map((item) => ({text: item})); // 객체 반환

💡 findIndex(), map() 외에도 find(), filter(), reduce(), concat(), slice(), splice() 메소드 기능 알아두면 좋음 !

---

✅ Destructuring

‣ 배열 분해

• 위치에 따라 원소를 가져오므로 원하는 이름 사용 가능

const [firstName, lastName] = ['Hal Chalamet', 'Timothee'];

‣ 객체 분해

• 프로퍼티 이름 기준으로 가져오므로 동일한 프로퍼티 이름을 사용해야 함
• 별칭인 다른 이름으로 할당 가능

const {name: userName, age} = {name: 'bean', age: 26}

---

✅ Spread 연산자

// 각 배열의 값을 가져옴
const hobbies = ['Cooking', 'Sports'];
const newHobbies = ['Reading'];

const mergedHobbies = [...hobbies, ...newHobbies];
console.log(mergedHobbies); // ['Cooking', 'Sports', 'Reading']

---

✅ for ... of ... 문

const password = prompt('Your password'); // 사용자가 입력 받는 창 표시

const hobbies = ['Cooking', 'Sports'];

// 배열 원소 순회
for (const hobby of hobbies) {
	console.log(hobby);
}

// ‣ Cooking
// ‣ Sports

---

✅ js로 DOM 조작하기

const list = document.querySelector("ul");
list.remove();

---

✅ 함수를 값으로 사용하기

1️⃣ 함수명만 전달

미리 정의된 함수를 다른 함수에 전달할 땐 이름만 전달하면 함수 자체를 값으로 전달하게 된다

function handleTimeout() {
	consoel.log("Time out!");
}

setTimeout(handleTimeout);

// 함수 자체를 전달할 땐 함수명만 전달!
function greeter(greetFn) {
	greetFn();
}

greeter(() => console.log('Hi');

2️⃣ 함수 자체 전달

() 소괄호를 포함한 함수를 전달하면 함수가 바로 실행되며, 해당 함수의 반환값이 전달된다

// 타이머가 설정될 때 handleTimeout 함수가 바로 실행된 다음
// 이 때, handleTimeout 반환값이 전달됨
setTimeout(handleTimeout());

✋ setTimeout() 메소드의 매개변수 설정시에는 반환값이 아닌 함수 자체를 전달해야 하므로 함수명만 전달해야 한다

setTimeout(handleTimeout, 2000);

// 익명 함수를 전달할 때도 이를 바로 실행하는 것이 아니라
// 정의만 하고 정의한 함수를 setTimeout에 전달할 뿐 !
setTimeout(() => {
	console.log('More timing out...');
}, 4000)

---

✅ 기본형 & 참조형 값 비교

‣ 기본형

e.g. string, number, boolean

• 기존 값 변경 불가 ❌ ⇒ 새로운 값을 생성하는 것 !

let msg = 'Hello!';
msg = 'Hello there!'; // 덮어써서 새로운 문자열을 저장 -> 즉, 새로운 string 생성

// 이때 기존 메모리에 저장된 string 'Hello!'는 삭제
// => 즉, 변경되어 string이 되는게 아니라 새로운 string이 생성되는 것!!

‣ 참조형

e.g. object, array

• 기존 값 수정 ⭕️
  ⌞ 변수에 값 저장할 땐 값 자체를 저장하는 게 아니라 해당 값의 메모리 주소를 저장
  ⇒ 메모리의 배열은 수정되지만 주소는 변하지 않음

🤔 const로 선언된 배열은 수정이 가능할까?

📢 결론은 YES ⭕️ !!!
보통 알고 있는 사실은 const로 선언하면 수정할 수 없다고 알고 있다
그치만 엄밀히 말하자면 값을 변경할 수 없다는뜻이 아니라 변수를 덮어쓸 수 없다 는 뜻!
⇒ 그니까 즉, 새 값을 할당할 수는 없다 !!

✋ But! const에 객체를 저장하고 객체는 주소를 참조하여 엑세스된다는 점을 활용해서 메모리 주소에 있는 값을 조작할 수는 있다

const array = ['a', 'b'];
const newArray = []; // 새 값 할당은 불가
array.push('c'); // 이와 같이 메소드를 활용해서 배열 수정은 가능하다는 점 주의!!
// const로 선언한 배열도 조작은 가능하다는 점 ~.~