Udemy - React : 자바스크립트 새로고침

👥Club/☁️9oormthon univ☁️

Udemy - React : 자바스크립트 새로고침

비엔 Vien 2025. 4. 20. 23:28

defer

type = "module"

해당 자바스크립트 파일을 자바스크립트 모듈로 취급하게 됨 -> js 에서 import/export 사용 가능

JSX 코드

: 자바스크립트 파일에 작성된 HTML 코드

<리액트 프로젝트가 **빌드 프로세스(Build Process)**를 사용하는 이유>

처리 되지 않은 코드는 JSX는 브라우저가 직접 실행할 수 없음
리액트에서는 JSX라는 문법을 사용하는데 이건 기본 자바스크립트 문법이 아님, 그래서 우리가 작성한 원시(처리되지 않은) 리액트 코드(JSX)는 브라우저에서 바로 실행되지 않음 (react-scripts 라이브러리 -> 브라우저에서 실행되거나 브라우저에서 실행되는 리액트가 사용하는 게 아니라 브라우저에 전달되기 전에 뒤에서 코드를 변환하는 다양한 툴을 제공함 = 전달될 HTML 파일에 script 태그를 추가함)
코드를 최적화하지 않으면 실제 배포에 적합하지 않아
우리가 개발할 때 작성하는 코드는 가독성을 높이기 위해 들여쓰기나 주석 등이 많고, 파일 크기도 크지. 하지만 실제 서비스를 배포할 땐 이런 코드가 용량을 차지하고 속도를 느리게 할 수 있어. 그래서 빌드 프로세스를 통해 코드를 최소화(minify) 하고, 불필요한 부분을 제거해서 더 빠르고 효율적으로 동작하도록 만들어주는 거야.

요약하자면:
👉 JSX 같은 특수 문법을 브라우저가 이해할 수 있도록 변환하고,
👉 실제 서비스에 적합하도록 코드를 최적화하기 위해
리액트는 반드시 빌드 과정을 거쳐야 해!

import/export

여러 파일에 코드를? 나눌 수 있게 만듦

(위에서 말한것처럼 type = "module"속성 사용해야 함

<ab.js>
1.
export let apiKey = "aaa";
export let abc = "abc"; 

또는

2.이름 없는 값을 export, 근데 파일별로 하나의 default export만 존재 가능 (위처럼 default를 사용하지 않으면 몇개든 export 가능)
export default "aa";

---------------------------

1.
import { apiKey } from " ./ab.js"; //같은 폴더 안에 있으면 ./, 상위 폴더로 이동하려면 ../
import { apiKey, abc } from " ./ab.js";
import apiKey from " ./ab.js";
console.log(apiKey);

import * as util from " ./ab.js"; //util.js가 제공하는 모든 대상이 util 객체에 결합됨
console.log(util.apiKey);


import { apiKey, abc as content } from " ./ab.js"; // as 로 별칭 주기
console.log(content);

화살표 함수 (익명함수) (( 일반적 함수는 어케 하시는지 아니깐 넘어갈게요 ))

export default (username, message) =>
   console.log("Hello");
   return userName + message;
};

<구문 단축키>

1. 함수에 매개변수가 없는 경우 괄호 생략하면 안됨 / 함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안됨

함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안 됩니다.

() => { ... } 라고 써야 옳습니다.

함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안 됩니다.

(userName, userAge) => { ... } 라고 써야 합니다.
userName, userAge => { ... } 라고 쓰면 안 됩니다.

2) 함수 본문 중괄호 생략하기

화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 중괄호를 생략할 수 있습니다

number => {
return number * 3;
}

라고 쓰는 게 아니라

number => number * 3;

라고 쓸 수 있습니다.

아래와 같이 오류가 생깁니다.

number => return number * 3; // 이 경우 retrun 키워드는 생략되어야 하므로, 오류가 생깁니다.
number => if (number === 2) { return 5 }; // 이 경우 if 문은 반환될 수 없으므로 오류가 생깁니다.

3) 특수한 경우: 객체만 반환하는 경우

2)에서 설명한 짧은 대안으로 자바스크립트 객체를 반환하려고 하면, 다음과 같이 유효하지 않은 코드가 나올 수 있습니다.

number => { age: number }; // 객체를 반환하려고 합니다.

자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 래퍼로 취급하기 때문에 이 코드는 유효하지 않습니다.

객체를 생성하고 반환해야 한다고 자바스크립트에 “말하려면” 코드를 다음과 같이 수정해야 합니다:

number => ({ age: number }); // 추가 괄호를 써서 객체를 감싸줍니다.

객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하기 위한 것임을 이해합니다. 따라서 객체가 반환됩니다.

객체 (클래스)

const user = {
    name: "Max",
    age: 34,
    greet() {
        console.log("Hello!");
        console.log(this.age);
    }
};

console.log(user.name);
user.greet();


class User {

    //생성자 함수 
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    
    greet(){
    console.log('Hi!');
    }
}

const user1 = new User("Manuel", 35);

배열 및 배열 메소드

const abc = ['a', 'b', 'c'];
cosole.log(abc[0]); //a
abc.push("d");

const index = abc.findIndex((item) => {
    return item === 'a';
});
console.log(index); //0


const editedabc = abc.map((item) => ({ text : item }));
console.log(editedabc); // 니가 생각하는 그게 만들어짐 튜플이엇나

배열 객체 분해

const [firstNmae, lastName] = ["Max", "Schwarzmuller"]


const {name, age} = {
    name: "Max",
    age: 34
};

_________________________________
// 별칭주기도 가능
const {name : userName, age} = {
    name: "Max",
    age: 34
};

console.log(userName); //Max
console.log(age); //34

<디스트럭처링(Destructuring)>
배열이나 객체 안에 있는 값을 쉽게 "꺼내오는" 문법

함수 매개변수 목록에서 디스트럭처링

이전 강의에서 설명한 디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있습니다.

예를 들어, 함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 “꺼내어’” 로컬 범위 변수(즉, 함수 본문 내에서만 사용할 수 있는 변수)로 사용할 수 있도록 함수를 디스트럭처링할 수 있습니다.

다음은 예시입니다:

function storeOrder(order) {
localStorage.setItem('id', order.id);
  localStorage.setItem('currency', order.currency);
}

storeOrder 함수 본문 내부의 "점 표기법"을 통해 order 프로퍼티에 접근하지 않고, 다음과 같이 디스트럭처링을 사용할 수 있습니다:

function storeOrder({id, currency}) { // 디스트럭처링
localStorage.setItem('id', id);
  localStorage.setItem('currency', currency);
}

디스트럭처링 구문은 이전 강의에서 배운 것과 같습니다. 상수나 변수를 수동으로 생성하지 않을 뿐입니다.

대신, 들어오는 객체(즉, storeOrder 에 인수로 전달된 객체)에서 id와 currency 를 "꺼내어" 사용합니다.

이 예제에서 storeOrder 는 여전히 하나의 매개변수만 받는다는 점이 매우 중요합니다! 매개변수는 두 개가 아니라, 하나의 매개변수, 즉 내부적으로 디스트럭처링된 객체만 받습니다.

함수는 여전히 다음과 같이 호출됩니다

storeOrder({id: 5, currency: 'USD', amount: 15.99}); // 1개의 매개변수 / 값!

배열 병합...

const hobbies = ["Sports", "Cooking"]
const user = {
    name: "Max",
    age: 34
    };
    
const newHobbies = ["Reading"];

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




const extendedUser = {
    isAdmin: true;
    ...user
 };
console.log(extendedUser);
// {isAdmin: true, name: "Max", age: 34}

for 반복문

const hobbies = ["Sports", "Cooking"]

for (const hobby of hobbies){
    console.log(hobby);
}

//sports
//Cooking

함수를 값으로 설정하기

함수에 함수를 전달할때 소괄호 없이 이름만 전달

//함수정의
function handleTimeout(){
    console.log("Timed out!");
}


//익명함수로도 함수 정의가능, 변수나 상수에 할당해서 사용
const handleTimeout2 = () => {
    console.log("Timed out .. again!)"
}

----

//함수에 함수 자체를 전달하기 = 소괄호 없이 
setTimeout(handleTimeout, 2000); // 뒤에 2000은 대기시간임 
setTimeout(handleTimeout2, 2000);
setTimeout(() => {
    console.log('More timing out...');
}, 2000);

//함수에 함수 반환값 전달하기 = 소괄호 있게
setTimeout(handleTimeout());


-----------------------------


function greeter(greetFn){
    greetFn()
}

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

함수 내부에서 함수 사용하기

function init(){
    function greet() {
        console.log("Hi!");
    }
    
    greet();
}

init(); // Hi!

참조형과 기본값 비교

아아아 상수로 선언한 배열을 상수의 값을 수정하는게 아니라 참조값을 변경하는 것이기 때문에 상수의 기본적인 정의 위반하지 않으므로 수정 가능!!!

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

hobbies.push("Working");
console.log(hobbies);