자바스크립트 - 동기처리와 비동기처리

동기식 처리는 코드를 직렬적, 즉 순차적으로 실행하며 어떤 작업이 실행중이면다음 작업은 대기하게 된다. 

 

-> 자바스크립트는 단일스레드, 하나의 작업만을 처리하기 때문

 

비동기식 처리모델은 코드를 병렬적으로 실행, 작업이 종료되지 않은 상태여도 대기하지 않고 다음 작업을 실행한다. 

DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작

function1 이 실행되면 callstack에 쌓인다. 그리고function1은 function2를 호출하므로 function2가 callstack에 쌓이고 setTimeout 함수가 호출, 

-> setTimeout  콜백함수는 즉시 실행되지 않고 지정된 시간만큼 기다리다가 이벤트가 발생하면 taskQueue로 이동한 후 callstack이 비어졌을 때 callstack으로 이동되어 실행된다. 

 

-> 비동기처리 로직을 위해 콜백함수를 연속으로 사용하면 콜백지옥이 될 수 있다

-> promise, Async 를 사용

 

 

 

 

 

 

 

 

1. 리액트를 사용하는 이유

• 완성도 높고 이해하기 쉽다.
  라이브러리에 최적화된 개발 인터페이스와 코딩언어/ 다른 인기 프레임워크와 달리 html어트리뷰트가 없다
  -> jsx를 자바스크립트에 넣음으로써 간결하고 가독성이 뛰어난 코드를 제공
• html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있어서- React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능
• 큰 프로젝트일 수록 html 관리 편리해짐  
•  UI를 구성하는 개별적인 뷰 단위 /컴포넌트들을 나눠놨기에 다른 부분, 또 다른 웹에서 재사용이 가능해집니다. 이는 생산성과 유지 보수를 용이

2.virtual DOM이 무엇인지, 작동원리

• DOM은 문서 객체모델/ 브라우저에서 다룰HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸것
• 리액트에서는 가상 돔을 사용한다. 가상 돔이란, 실제 DOM(Document Object Model)을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동  
• Virtual Dom(이하 가상 DOM)은 수정사항이 여러 가지 있더라도, 가상 DOM은 한 번만 렌더링을 일으킨다
  1. 초기 렌더링 : REACT웹이 브라우저에 로드될때 초기 UI를 생성하기 위해 가상 DOM이 만들어진다, 실제DOM과 동일한 구조를 가지지만 메모리 상에만 존재
  2.상태변경 감지 사용자 상호작용이 발생하거나 데이터가 변경될 때 REACT는 이를 감지하고 가상  DOM을 업데이트합니다. 이때 실제 DOM 은 업데이트 X
  3. 가상DOM 비교 새로운 상태로 가상DOM이 업데이트 되면 REACT는 이전 가상 DOM과의차이를 계산합니다. 이를 통해 실제 DOM에 필요한 최소한의 변경만을 반영
  4.실제 DOM업데이트: 가상 DOM 비교를 통해 실제 DOM 에 필요한 변경 사항을 파악하면 REACT는 이를 실제 DOM에 적용합니다. 이때    
•  
• 3.클래스 컴포넌트와 함수형 컴포넌트의 차이
  클래스형 컴포넌트는 상태값을 가질 수 있고 리액트 컴포넌트의 생명주기함수를 작성할 수 있다. 
  함수형 컴포넌트는 할 수 없음/
  둘의 차이점은 상태값과 LifeCycle를 가질 수 있느냐 없느냐 차이
• 1. 상태(state) 관리: 클래스형 컴포넌트는 내부에 상태(state)를 가질 수 있습니다. this.state를 사용하여 상태를 초기화하고, this.setState를 사용하여 상태를 업데이트합니다.
  2. 라이프사이클 메서드: componentDidMount, componentDidUpdate, componentWillUnmount 등과 같은 라이프사이클 메서드를 사용하여 컴포넌트의 생명주기에 따른 작업을 수행할 수 있습니다.
  3. 클래스 기반 구조: 클래스형 컴포넌트는 JavaScript의 클래스(class)를 사용하여 정의됩니다. 이는 상속(inheritance)과 같은 객체지향 프로그래밍의 개념을 활용할 수 있습니다.
  4. this 사용: 클래스형 컴포넌트 내부에서 this를 사용하여 인스턴스 멤버에 접근할 수 있습니다.
     
     
     1. 상태(state) 관리: 초기에는 함수형 컴포넌트는 상태를 관리할 수 없었지만, React 16.8부터 도입된 useState 훅을 사용하여 상태를 관리할 수 있게 되었습니다.
     2. 라이프사이클 메서드: 함수형 컴포넌트는 이전에는 라이프사이클 메서드를 사용할 수 없었지만, React 16.8부터 도입된 useEffect 훅을 사용하여 라이프사이클에 관련된 작업을 수행할 수 있게 되었습니다.
     3. 함수 기반 구조: 함수형 컴포넌트는 JavaScript의 함수를 사용하여 정의됩니다. 이는 간결하고 함수형 프로그래밍의 개념을 활용할 수 있습니다.
     4. 클로저 활용: 함수형 컴포넌트는 자바스크립트의 클로저(closure)를 활용하여 상태를 유지하고 함수를 반환할 수 있습니다.