[React JS] 리액트 기본 개념과 비동기 처리 복습

⭐리액트의 클래스형 & 함수형 컴포넌트 ?

리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있습니다.  둘의 가장 큰 차이점은 상태값과 LifeCycle을 가질 수 있느냐 없느냐 입니다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있습니다. 함수형 컴포넌트는 이 모든 일을 할 수 없습니다.  하지만 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었습니다.

LifeCycle Method는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들입니다.
추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. 

*컴포넌트 라이프 사이클은 크게 마운트 - 업데이트 - 언마운트로 단계로 나뉜다.

---

DOM(The Document Object Model)은

• HTML, XML 문서의 프로그래밍 interface입니다.
• DOM은 nodes와 objects로 문서를 표현합니다. (웹 문서의 객체 지향적 표현이라 할 수 있습니다.)
• 웹 문서를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결해주는 역할을 합니다.
• DOM은 웹페이지의 모든 콘텐츠를 객체로 나타내고 document 객체를 사용해 웹 페이지 내 조작(노드, 스타일, 속성, 이벤트 등을 제어)을 할 수 있습니다.

 

DOM(문서 객체 모델)은 HTML 문서를 노드 트리로 나타내는데 그렇기 때문에 DOM 트리의 모든 노드는 객체입니다. 

여기서 노드란 트리구조에서 데이터의 상 하위 계층을 나타내는 위치의 항목을 말합니다.

예를 들어 html은 모든 요소의 부모이며 head와 body는 html의 자식입니다. 이러한 형태를 노드 트리라고 부릅니다. 

 

 

BOM(Browser Object Model)

*호스트 환경(자바스크립트가 돌아가는 플랫폼)

• BOM(브라우저 객체 모델)은 브라우저와 컴퓨터 스크린에 접근할 수 있는 객체 모음을 말합니다.
• 브라우저와의 소통할 수 있게 해주는 인터페이스입니다.
• BOM은 호스트인 브라우저가 제공하는 추가 객체를 말합니다(웹 브라우저와 관련된 객체의 집합). 
• window 객체를 통해 접근 가능합니다. 

 

window 객체 모델 

• navigator: 브라우저 명과 버전 정보를 속성으로 가짐
• window: 최상위 객체로 각 프레임 별로 하나씩 존재
• document: 현재 문서에 대한 정보
• location: 현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL
• history: 현재의 브라우저가 접근했던 URL history
• screen: 브라우저의 외부환경에 대한 정보를 제공

 

웹 브라우저의 구성 요소들은 하나하나가 객체화되어 있는데 자바스크립트로 이 객체를 제어해서 웹 브라우저를 제어할 수 있습니다. 브라우저 상에서 웹 문서만 담당하는 게 document객체이고 브라우저 전체를 담당하는 게 window 객체입니다. 

DOM과 BOM의 차이점은 DOM은 document 즉 현재 눈에 보이는 웹문서(html)에 대한 제어와 변경을 했다면, 

BOM은 window 속성에 속하여 document가 아닌, window를 제어합니다. 

• 여기서 브라우저라는 것은 결국 window 안에서 실행되는 프로그램이므로, 모든 개별 객체들은 최상위 객체인 window 아래에 존재합니다. 
• DOM은 웹문서를 담당하는 document 객체와 관련 / BOM은 브라우저 전체를 담당하는 window 객체와 관련

---

 

바벨(Babel)이란?

• 바벨은 컴파일러(compiler)입니다. 단순히 말하자면 번역기입니다. 우리가 작성할 ES6 혹은 그 이상의 버전의 자바스크립트와 JSX는 웹 브라우저가 지원해주어야 실행할 수 있는데 babel은 브라우저가 지원해주지 않아도 해당 브라우저가 알아들을 수 있도록 번역해줍니다. 

webpack 이란?

• 웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리입니다. 번들러는 여러개로 나뉜 모듈을 하나로 묶어주는 것입니다. 의존성이 있는 것들을 찾아서 그룹핑해주는 도구이죠. 

 

⭐가상 돔(Virtual DOM)이란?

[개념] 가상돔은 메모리 상에서 돌아가는 가짜 DOM입니다. 

DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할 것을 찾고 싹 수정하게 되면 필요없는 연산이 너무 많이 발생하게 됩니다. 이러한 문제점을 보완하기 위해 등장한 것이 가상돔입니다.   

[동작방식] 기존 DOM과 가상 돔을 비교해서 바뀐 부분만 갈아끼워 주는 형식으로 돔 업데이트 처리를 합니다. 

 

---

⭐Component란? 

1. 독립적인 기능을 수행할 수 있는, 재사용이 가능한 최소 단위입니다. (간단히 말하면, React가 레고라면 Component는 블록입니다. )
2. JSX를 리턴하는 함수(정확히는 함수형 컴포넌트가 return 해주는 React 엘리먼트가 화면에 표시됩니다.)

⭐함수형 컴포넌트 상태관리? 

컴포넌트가 어떻게 데이터를 관리할까요?

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

상태관리 ? 
컴포넌트가 리턴하는 리액트 엘리먼트는 불변 객체입니다. 이 불변 객체의 자식 노드 등 무언가를 바꿔주고 싶다면 "어떤 값이 변했으니 어디를 업데이트해라"라고 해주어야 합니다. state는 여기서 어떤 값을 담당합니다. 그리고 그 값이 변했다는 걸 명확히 알려주려면 임의로 값을 할당해서는 안됩니다. 정해진 규칙대로 값을 업데이트해줘야 합니다. 

 

⭐props

1. Component가 부모 component로부터 받아온 데이터입니다.
2. 읽기 전용이라 props는 절대 수정하면 안됩니다. (read only)
3. props는 순수 함수처럼 동작해야 한다. 

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

⭐state

1. 컴포넌트(Component)가 가지고 있는 데이터이다.
2. 함수형 컴포넌트는 useState() 훅을 사용하여 상태값을 가질 수 있습니다.
3. state는 직접 수정해선 안됩니다.
4. state는 비동기적으로 업데이트 됩니다.

---

자바스크립트의 비동기 처리

⭐callback 이란?

특정 함수의 매개변수로 전달된 함수를 말합니다.

 

🔥콜백 패턴은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나입니다. 즉, 콜백과 콜백 패턴은 다른 것입니다. 전통적인 콜백 패턴은 일명 콜백 헬로 불리는 중첩 문제가 생기기 쉽습니다. 

 

🔥콜백 헬이란? 

꼬리에 꼬리를 무는 비동기 처리가 늘어나면서 호출이 계속 중첩되고, 코드가 깊어지며 관리는 어려워지는 현상을 말합니다. 이런 깊은 중첩을 콜백 헬이나 멸망의 피라미드라고 부릅니다. 

 

🛠[콜백 헬이 발생하는 이유] 

• 비동기 처리 시에는 실행 완료를 기다리지 않고 바로 다음 작업을 실행하기 때문에 순서대로 코드를 적는다고 해서 우리가 원하는 순서로 작업이 이뤄지지 않습니다. 즉, 비동기 처리 함수 내에서 처리 결과를 반환하는 것으로 원하는 동작을 하지 않으니, 콜백함수를 사용해 동작을 하게 하려고 콜백 함수를 씁니다. 
• 그리고 이 콜백 함수 내에서 또 다른 비동기 작업이 필요한 경우 위와 같은 중첩이 생기면서 콜백 헬이 생기게 됩니다. 

⭐Promise 란? 

- 전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또 다른 비동기 처리 패턴입니다. 

비동기 연산이 종료된 이후 결과를 알기 위해서 사용하는 객체입니다. 프라미스를 쓰면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있습니다. 이를 통해 비동기 처리 시점을 좀 더 명확하게 표현할 수 있습니다. 

 

🔥[프로미스 생성]

• 프로미스는 Promise 생성자 함 수 new 키워드를 통해 생성합니다. 
• 비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용합니다
  • (resolve, reject) => {} 이런 excutor 실행자(혹은 실행 함수)를 받습니다. 실행자는 비동기 함수가 끝나면 바로 두 가지 콜백 중 하나를 실행합니다. 

🔥[프로미스의 상태값]

• pending : 비동기 처리 수행 전 (resolve, reject가 호출x)
• fulfilled : 수행 성공(resolve 가 호출된 상태)
• rejected : 수행 실패(rejected가 호출된 상태)

🔥[프로미스 후속 처리 메서드]

then(), catch()

• 프로미스로 구현된 비동기 함수는 프로미스 객체를 반환합니다. 
• 프로미스로 구현된 비동기 함수를 호출하는 측에서는 이 프라미스 객체의 후속 처리 메서드를 통해 비동기 처리 결과(성공 결과나 에러메세지)를 받아서 처리합니다. 

🔥[프로미스 체이닝]

• 후속 처리 메서드인 then()을 쭉쭉 이어주는 것을 말합니다. 
• 프로미스는 후속 처리 메서드를 체이닝하여 여러 개의 프로미스를 연결할 수 있습니다.(이것으로 콜백 헬을 해결할 수 있습니다)