[리액트 React] 심화반 강의 1주차 정리

728x90

✅ Javascript Re-start! (1) - 기본

1️⃣ 변수와 상수

🔹 변수 생성의 3단계

▶️ 선언 -> 초기화 -> 할당

- 선언 : 실행 컨텍스트에 변수 객체를 등록(스코프가 참조하는 대상이 되도록)

- 초기화 : 변수 객체에 등록된 변수를 위헤 메모리에 공간을 확보(여기서 변수는 보통 undefined로 초기화)

- 할당 : undefined로 초기화된 변수에 실제 값을 할당

👌 var

var는 가급적 사용하지 않는 것이 좋다.

- var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다.

- var는 선언과 초기화를 한번에 한다.

- 재선언이 가능하다.

- 선언하기 전에도 사용할 수 있다.

// var는 이런 식의 사용도 가능하다.
// var name은 선언! name = "perl"은 할당!
function cat(){
	name = "perl";
	alert(name);
	var name;
}

cat();

보면, var name이 함수 맨 아래에 쓰였음에도 불구하고 name = "perl"이라는 것을 할당하고 있다. 즉, 선언하기 전에도 사용할 수 있다.

- 코드 블럭을 무시한다. var는 함수의 최상위로 호이스팅 된다. 선언은 호이스팅 되고 할당은 호이스팅 되지 않는다.

// var name 은 함수의 최상으로 호이스팅되기 때문에, 실행될 일 없는 구문속에 있어도 선언이 된다. 
// 자바스크립트가 동작하기 전에 코드를 한 번 훑는데 그 때, var로 선언된 코드를 전부 최상위로
// 끌어올려버린다. 동작해선 안되는 구문이라도 전부!

function cat(){
	name = "perl";
	// 이 if문 내로는 절대 들어올 일이 없다.
	if(false) {
		var name;
	}
	alert(name);
}

cat();

👌 let

- 자바스크립트에서 변수를 생성할 때 쓰는 키워드

- block-scope를 갖는다. { } 안에서 선언하면 { } 안에서만 쓰고 바깥에서 쓸 수 없다.

- 재선언은 불가, 재할당은 가능하다.

// 재할당은 가능!
let cat_name = 'perl';
cat_name = '펄이';

// 재선언은 오류!
let cat_name = 'perl';
let cat_name = '펄이';

👌 const

- 자바스크립트에서 상수를 생성할 때 쓰는 키워드

- block-scope를 갖는다. { } 안에서 선언하면 { } 안에서만 쓰고 바깥에서 쓸 수 없다.

- 재선언 불가, 재할당도 불가(=> 선언과 동시에 할당한다)

// 재할당 오류!
const cat_name = 'perl';
cat_name = '펄이';

// 재선언도 오류!
const cat_name = 'perl';
const cat_name = '펄이';

// 선언과 동시에 할당 되기 때문에 값을 안줘도 오류가 난다.
// declare!
const cat_name;

👌 TDZ(Temporal Dead Zone) = 일시적 사각지대

🔹 let과 const도 호이스팅이 될까?

var 와 let, const의 차이점 중 하나는 변수가 선언되기 전에 호출하면 ReferenceError가 난다는 점이다.

❓ 왜 에러가 날까? 호이스팅이 안 된 걸까?

호이스팅(=선언 끌어 올리기)은 된다. 다만, 선언한 후 초기화 단계에서 메모리에 공간을 확보하는데 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없다. 그래서 변수를 참조할 수 없기 때문에 에러가 난다. 이를 TDZ라고 한다.

🔹 그럼 let, const는 호이스팅이 되지 않는 걸까?

호이스팅은 된다!

🔹 왜 레퍼런스 에러가 날까?

TDZ 때문에 그렇다.

🔹 정리

- let, const 선언도 호이스팅이 된다.

- 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐이다.

👌 변수명

변수명은 숫자로 시작할 수 없고 _와 $를 제외한 특수문자를 쓸 수 없다. 그 외의 모든 것은 가능하며 한글도 가능하다.

2️⃣ 자료형

자바스크립트는 8가지 기본 자료형을 지원한다. 객체를 제외한 나머지 7가지를 원시형(primitive type)이라고 부른다. typeof 연산자로 자료형을 알아낼 수 있다.

- 숫자형 : 정수, 부동 소수점을 저장 -(2^53-1) ~ (2^53-1)까지 지원

- BigInt형 : 아주 큰 숫자를 저장

- 문자형 : 문자열을 저장

- boolean형 : 논리값 true/false

- undefined : 값이 할당되지 않음을 나타내는 독립 자료형

- null : 값이 존재하지 않음을 나타내는 독립 자료형

- 객체형 : 복잡한 자료구조를 저장

- 심볼형 : 고유 식별자를 만들때 사용

자바스크립트는 많은 버전이 있다. 보통 이야기하는 하위 버전 자바스크립트는 ES3, 최신이다, 모던이다고 하면 ES6 이상을 가리킨다. 자바스크립트는 하위 호환성에 따른 언어라, 코드를 읽을 때 최신, 모던한 방식보다는 하위 호환에 초점을 맞춰 동작한다. 최신 기능이라고해서 써봤는데 오류가 발생할 수도 있다.

그럴 때 쓰는 것이 엄격 모드 use strict 이다. "use strict;" 를 스크립트 최상단에 써주면 모던 자바스크립트에서 지원하는 모든 기능을 활성화해준다.

✅ Javascript Re-start! (2) - 객체

1️⃣ 객체란?

👌 오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있다.

🔹 원시형 예시

let a =1111 // 숫자

let b = "222" // 문자

let c = "true" // 불린

🔹 객체 예시

let d = [123, 456, abcd]

let e = { s : 12, age : 15}

👌 key로 구분된 데이터 집합, 복잡한 개체를 저장할 수 있다.

👌 {...} 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있다.

🔹 프로퍼티는 key : value로 구성

let e = { s : 12, age : 15} // s가 key가 되고 12가 value가 된다.

🔹 key에는 문자형, value에는 모든 자료형이 들어갈 수 있다.

let d = [123, 456, abce] // key가 없어보이지만 console.log(d[0]) 을하면 123이 반환된다. 즉, 0 : 123 이렇게 key 값이 있는 것

▶️ 객체 생성자

let cat = new Object();

▶️ 객체 리터럴로 만들기

let cat = { };

중괄호로 객체를 선언하는 것을 리터럴이라고 하는데, 객체 선언할 때 주로 사용한다.

2️⃣ 상수는 재할당이 안 된다고 했었으나,,

👌 const로 선언된 "객체"는 수정될 수 있다.

👌 const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미한다. 즉, 객체의 프로퍼티는 보호되지 않는다.

const my_cat = {
	name: "perl",
	status: "좀 언짢음",
}

my_cat.name = "펄이"; 

console.log(my_cat) // 고양이 이름이 바뀌었다.

// 여기에선 에러가 발생한다. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없다
my_cat = {name: "perl2", status: "많이 언짢음"};

✅ Javascript Re-start! (3) - 함수

자바스크립트는 함수를 특별한 값 취급을 한다. ( ) 가 있으면 함수를 실행하고 ( ) 가 없으면 함수를 문자형으로 바꿔 출력하기도 서슴치 않는다. 함수를 값으로 취급하는 것.

예시)

function a() {

	return 1

}

console.log(a())   // 을 반환한다.

console.log(a)

// 아래처럼 함수를 문자열처럼 반환해버린다.
function a() {

	return 1

}

함수는 return으로 어떤 값을 넘겨주지 않는다면 기본적으로 undefined를 반환한다.

1️⃣ 함수 선언문과 함수 표현식

👌 함수 선언문

// 이렇게 생긴 게 함수 선언문 방식으로 함수를 만든 것이다.

function cat() {
	console.log('perl');
}

👌 함수 표현식

// 이렇게 생긴 게 함수 표현식을 사용해 함수를 만든 것이다.

let cat = function() {
	console.log('perl');	
}

// 물론 화살표 함수로 써도 됩니다.
// 화살표 함수는 함수 표현식의 단축형이라는 것을 주의해야한다!

let cat2 = () => {
	console.log('perl2');
}

👌 함수 선언문 vs 함수 표현식

- 함수 선언문으로 함수를 생성하면 독립된 구문으로 존재한다.

- 함수 표현식으로 함수를 생성하면 함수가 표현식의 일부로 존재한다.

- 함수 선언문은 코드 블록이 실행되기 전에 미리 처리되어 블록 내 어디서든 사용할 수 있다.

- 함수 표현식은 실행 컨텍스트가 표현식에 닿으면 만들어진다(변수처럼 처리되는 것).

// 함수 선언문

console.log(cat())

function cat() {
	return 1
}

함수 선언문은 위처럼 함수 위에 console을 해도 반환을 정상적으로 한다.

// 함수 표현식

console.log(cat())

let cat = function() {
	return 1
}

함수 표현식은 이렇게 하면 에러가 발생한다. 

let cat = function() {
	return 1
}

console.log(cat())

이렇게 표현해야 한다. 실행 컨텍스트가 표현식에 닿아야 한다.

2️⃣ 지역 변수와 외부 변수

👌 지역 변수

- 함수 내에서 선언한 변수

- 함수 내에서만 접근 가능

👌 외부 변수(global 변수라고도 한다)

- 함수 외부에서 선언한 변수

- 함수 내에서도 접근할 수 있다.

- 함수 내부에 같은 이름을 가진 지역 변수가 있으면 사용할 수 없다.

let a = 'a';
let b = 'b';
let c = 'outter!';

const abc = () => {
	let b = 'inner!'; 
	c = 'c';   
	let d = 'd';
	console.log(a, b, c, d);
}

console.log(a, b, c, d); // a, b, outter, undefined

abc(); // a, inner, c, d

console.log(a, b, c, d); // a, b, c, undefined

3️⃣ 콜백 함수

함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 한다.

// cat : 고양이 이름 텍스트 받아올 것
// action : 뭐하고 놀거야! 함수를 사용할 것

const playWithCat = (cat, action) => {
	action(cat);
}

const useBall = (cat) => {
	alert(cat+"과 공으로 놀아줍니다.");
}

//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!
playWithCat("perl", useBall);

✅ 브라우저 톺아보기

1️⃣ 브라우저란?

브라우저는 엄청 많은 기능을 가진 고도화된 어플리케이션이다. 자바스크립트는 바로 이 브라우저에서 사용하기 위해 만들어졌다.

👌 브라우저 구성

▶️ 사용자 인터페이스 : 주소 표시줄, 이전/다음 페이지 버튼, 북마크, 새로고침 버튼 등

▶️ 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

▶️ 렌더링 엔진 : 화면을 창에 보여준다

▶️ 통신 : HTTP같은 프로토콜을 이용해서 서버에 요청을 보내는 등에 사용

▶️ UI 백엔드 : 얼럿 창, 셀렉트 박스, 콤보 박스 등을 OS별로 그림

* OS : Operating System 운영 체제

▶️ 자바스크립트 해석기 : 자바스크립트를 해석하고 실행

▶️ 자료 저장소 : Cookie, Local Storage, Session Storage 등 데이터 저장

2️⃣ 렌더링 엔진 동작

브라우저가 화면을 그리는 과정이다.

▶️ 파싱 단계 : DOM 트리와 CSSOM트리를 만든다.

▶️ 렌더 트리 단계 : DOM과 CSSOM을 묶어서 렌더 트리를 만든다.

▶️ 레이아웃 단계 : 렌더 트리에서 각 노드가 어디에 어떻게 그려져야 하는 지 모양을 계산한다.

▶️ 페인트 단계 : 계산한대로 화면에 엘리먼트들을 배치한다(페인팅한다고 한다).

3️⃣ DOM : Document Object Model

문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜 주는 역할을 담당한다.

🔹 웹 페이지는 document이고 document는 객체이다.

DOM은 웹 페이지의 모든 콘텐츠를 객체로 나타낸다. 그리고 이 객체는 수정할 수 있다. document 객체를 사용해 웹 페이지 내의 무엇이든 변경할 수 있다.

4️⃣ BOM(Browser Object Model)

navigator, location 같은 객체들은 브라우저가 제공하는 추가 객체이다.

🔹 호스팅 환경 : 자바스크립트가 돌아가는 플랫폼

BOM은 호스트인 브라우저가 제공하는 추가 객체를 말한다.

navigator, location 외에도 confirm, alert 등이 BOM의 일부이다.

confirm, alert 등은 사용자와 브라우저 사이의 원활한 소통을 도와주는 순수한 브라우저 메서드이다.

5️⃣ CSSOM : CSS Object Model

CSS는 HTML하고는 구조가 다르며, CSS만의 문법, 규칙이 있다. 그 규칙과 스타일 시트를 객체로 나타낸다. DOM이 웹 페이지를 객체로 나타내는 것처럼.

✅ Virtual DOM

1️⃣ 가상 돔이란?

🔹 렌더링 엔진 동작과정

- 파싱 단계

- 렌더 트리 단계

- 레이아웃 단계

- 페인트 단계

DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할 것을 찾고 전체 수정을 하게 되면 필요없는 연산이 너무 많이 일어나기 때문에 등장한 것이 가상돔이다.

가상돔은 메모리 상에서 돌아가는 가짜 DOM 이다.

👌 가상돔의 동작 방식

기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현)을 비교해서 정말 바뀐 부분만 갈아끼워준다. 돔업데이트 처리가 빨라진다. 다만, 코드를 잘 관리하지 못하면 오히려 가상 DOM을 쓸 때 더 느려질 수 있다.

✅ 함수형 컴포넌트 - (1) 함수형 컴포넌트 살펴보기

1️⃣ Component란?

React가 레고라면, Component는 블록이다.

즉, 독립적인 기능을 수행할 수 있는 재사용이 가능한 최소 단위이다.

👌 함수형 컴포넌트 생김새

function IAmComponent(props) {
	return (<p>I am component! :) Functional component!</p>);
}

2️⃣ 함수형 컴포넌트 만들기

//MyComponents.js
const One = () => {
  return (
    <div>
      <h1>One</h1>
    </div>
  )
}

const Two = () => {
  return (
    <div>
      <h1>Two</h1>
    </div>
  )
}

export default One;
export {Two};

위 내용처럼 One만 선언할 수 있는 것이 아니라 Two도 선언이 가능하다.

단, default는 한 컴포넌트당 한개만 가능하기 때문에 { Two } 이렇게, { } 안에 넣어줘야 한다.

//App.js
import One, { Two } from './MyComponents';

function App() {
  return (
    <div className="App">
      <One/>
      <Two/>
    </div>
  );
}

export default App;

App.js에서 불러올 때 모양을 보면, import One, { Two } 이렇게 모양이 나뉘는데, One은 default를 했기 때문이고 default를 하지 못한 것은 { } 안에 넣어 import를 해주면 된다.

또한, 차이는 One은 default를 One이라고 했다고 해서 호출을 One으로 동일하게 하지 않아도 된다.

//App.js
import OneOne, { Two } from './MyComponents';

function App() {
  return (
    <div className="App">
      <OneOne/>
      <Two/>
    </div>
  );
}

export default App;

이렇게, One이 아닌 OneOne 이런 식으로 모양을 자유롭게 바꿀 수 있다.

그게 가능한 이유는 default를 했기 때문이라서 Two는 모양을 바꿀 수 없지만, One은 모양을 바꿀 수 있다.

✅ 함수형 컴포넌트 - (2) 함수형 컴포넌트 상태관리

1️⃣ state와 props

컴포넌트의 데이터 관리를 상태 관리라고 한다.

👌 props

- Component가 부모 Component로부터 받아온 데이터이다.

- 읽기 전용이라 props는 절대 수정하면 안된다.

- props는 순수 함수처럼 동작해야 한다.

🔹 순수 함수 : 받아온 값(인자)를 수정하지 않고 항상 같은 값을 넣으면 동일한 결과를 내주는 함수

const IamPureFunction = (a,b) => {
	return a + b;
}

// a,b가 변하지 않았고 1과 2를 넣으면 언제나 3이 나온다.
IamPureFunction(1,2);

// a가 바뀌었으니 순수하지 않다.
// 이외에도 랜덤 함수를 사용해 랜덤한 값을 리턴해도 순수하지 않다.

const IamNotPureFunction = (a,b) => {
	a = b-a;
}

IamNotPureFunction(5,9);

👌 state

- Component가 가지고 있는 데이터이다.

- 함수형 컴포넌트는 useState()훅을 사용해서 상태값을 가질 수 있다.

- state는 직접 수정해선 안된다.

- state는 비동기적으로 업데이트된다.

🔹 useState()

import React from "react";

const One = () => {
	
    // 초깃값 woon 설정
    const [name, setName] = useState("woon");
      
    return{
    	<div>
        	<p>{name}</p>
            <button
            onClick = {() => {
            	setName("perl")
            }}
            >체인지</button>
        </div>
    }
}

export default One;

원래 woon이라고 나와있었으나, 버튼을 누르면 setName 안의 perl로 이름이 변경되도록 사용할 수 있다.

✅ 컴포넌트가 돔에 그려지는 과정

1️⃣ ReactDOM.createRoot()

👌 루트 DOM 노드

- public/index.html을 열면 <div id="root"></div> 가 있다.

- 만든 모든 컴포넌트는 이곳에 들어가게 된다. 나중에 다룰 Portal을 사용할 부분을 제외한 모든 컴포넌트가 루트 돔 노드에 들어간다.

- src/index.js 에 들어가면 아래와 같이 루트를 어떻게 만드는지 확인할 수 있다.

const root = ReactDOM.createRoot(document.getElementById("roo"));

2️⃣ ReactDOM.createRoot(someElement).render()

- render는 루트 돔 노드에 리액트 엘리먼트를 전달하는 역할을 한다(화면에 띄우기)

const one = () => {

	const [name, setNmae] = useState("woon")
    
	return(
    	<div>
        	<h1>one</h1>
            <p>{name}</p>
            <button
            onClick{() => {
            	setName("perl")
            }}
            >체인지</button>
        </div>
    )    
}

여기서 h1, p 태그 같은 것들은 돔 앨리먼트가 아니라 리액트 엘리먼트이다.

- 리액트 엘리먼트는 기본적으로 불면 객체이다. 속성, 자식 등 엘리먼트의 내용을 변경할 수 없다.

- render()는 엘리먼트에 변화가 필요할 경우 필요한 부분만 업데이트 해주는 역할을 한다.