-
Q1. 번들링은 왜 해야하는 걸까?
👉 파일, 코드 등이 많을 때, 번들링 툴이 불필요한 것들은 없애주고 전체적으로 통합해 줌.즉, 용량을 줄이기 위함이라고도 볼 수 있다. 그렇다면 용량은 왜 줄여야하는 걸까?
코드 관리는 모듈화하는 게 좋고, 네트워크는 아껴야 한다. 그렇지 않으면 시간도 오래 걸리고 낭비되는 게 많아진다. 즉, HTTP 요청을 줄이기 위함이다.
-
Q2.undefined와 null의 차이는?
👉 자바스크립트에서 값이 없음을 나타내기 위한 두 가지 특별한 데이터 타입. 각각 의미와 사용 방식에서 중요한 차이가 있음.1) undefined
변수가 선언만 되고 값이 할당되지 않았을 때 자동으로 가지는 값으로 자바스크립트가 값이 정의되지 않았음을 알려주는 상태. 즉, 자체적으로 고유한 타입으로 초기화되지 않은 변수를 위한 기본적인 상태를 의미함.2) null
'여기에는 값이 없다'는 것을 명시적으로 나타내기 위해 직접 설정하는 값으로 주로 비어 있는 객체나 변수에 의도적으로 설정해 놓는 값. 즉, null은 객체를 나타내는 것이 아니라 의도적인 빈 값을 의미함.
-
[2.4.5 undefined를 렌더링하지 않기] 실습해보기
- 리액트 컴포넌트에서는 함수에서 undefined만 반환해 렌더링하는 상황을 만들면 안 됨!
일부러 오류를 발생시켜 보자.
- 리액트 컴포넌트에서는 함수에서 undefined만 반환해 렌더링하는 상황을 만들면 안 됨!
-
import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const name = undefined;
return name;
}
export default App
코드를 저장한 후 브라우저를 확인해 보면 다음과 같은 오류가 나온다.
App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.JSX 내부에서 undefined를 렌더링하는 것은 괜찮음!
import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const name = undefined;
// jsx 내부에서 렌더링해도 괜찮음
return <div>{name}</div>
}
export default App만약 어떤 값이 undefined일 수도 있다면?
OR(||) 연산자를 사용하면 해당 값이 undefined일 때, 사용할 값을 지정할 수 있어 간단하게 오류를 방지할 수 있다.
import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App
name 값이 undefined일 때 보여 주고 싶다면?
import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const name = undefined;
// jsx 내부에서 렌더링해도 괜찮음
return <div>{name || '리액트'}</div>
}
export default App
-
Q3.자바스크립트 타입은 뭐가 있나?
1) 기본형(Primitive) 타입
👉 Number, BigInt, String, Boolean, Symbol, undefined, null
기본형 타입은 값이 불변하며, 변수에 직접 값이 저장되는 데이터 타입으로 복사하거나 비교할 때 값 자체를 기준으로 작동함.2) 참조형(Reference) 타입
👉 일반 객체(Object), 배열(Array), 함수(Function), 날짜(Date), 맵(Map), 셋(Set) 등
참조형 타입은 객체 형태로 값이 저장되며, 메모리 주소를 참조하는 방식으로 작동함.
복사하거나 비교할 때 변수에 저장된 주소(참조)를 기준으로 함.
-
Q4.var와 let의 차이는?
👉 리액트뿐 아니라 자바스크립트 전반에서 변수 선언 시 var와 let 그리고 const를 자주 볼 수 있다.1) var
- 같은 이름으로 다시 선언할 수 있음.
- 함수 스코프(function scope)를 가짐. 즉, 함수 안에서 선언된 경우 그 함수 내에서만 유효하지만, 블록(if 문, for 문 등) 내에서 선언해도 해당 블록을 무시하고 함수 전체에서 접근 가능함.
2) let
- 한 번 선언된 let 변수는 같은 스코프 내에서 재선언할 수 없음.
- 블록 스코프(block scope)를 가짐. 특정 블록 { } 내에서 선언되면 그 블록 내부에서만 유효하며, 블록을 벗어나면 접근할 수 없음.
(+) let과 const 차이
let은 변수를 선언하고 이후에 다른 값으로 재할당할 수 있지만, const는 변수를 선언하고 초기화한 후에 값을 변경할 수 없고, 재할당이 불가능함.
- 예시
// var와 let if (true) { var x = 10; // var은 블록을 무시하고 함수 전체에서 유효 let y = 20; // let은 블록 내부에서만 유효 } console.log(x); // 10 console.log(y); // ReferenceError: y is not defined /* ======================================================== */ // const와 let let a = 10; a = 20; // 가능 console.log(a); // 20 const b = 10; b = 20; // Error: Assignment to constant variable.
- 예시
