1. JavaScript에서 비동기적 코딩하기

1. 자바스크립트에서 비동기가 가능한 이유

• 브라우저 내장기능 중 하나인 이벤트 루프로 인해 멀티 스레드로 작동하여 비동기 작업이 가능해짐

2. 비동기 프로그래밍

• 브라우저에서의 비동기 프로그래밍은 주로 통신과 같이 오래 걸리는 작업들을 브라우저에 위임할 때 이루어짐

1. 콜백(Callback)함수

• 콜백함수 : 다른 함수의 인수로 넘기는 함수
• 대체적으로 비동기로 작동하지만 map, forEach, filter의 인자와 같이 동기식으로 호출되는 함수도 있음
• 콜백만으로는 비동기 흐름을 표현하기 어려워서 콜백 지옥이라는 용어가 생김

2. Promise

• Promise도 콜백 지옥을 해결할 순 없었지만 비동기 함수 후속처리가 다루기 쉬워짐
• Promise.all(): 비동기를 병렬처리할 때 사용
• Promise.race(): 여러 비동기 처리를 다룰 때 가장 먼저 fulfilled된 처리 결과를 반환

3. async/await

• ES8에서 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 구현하기 위해 도입됨
• Promise기반으로 동작하며, then, catch, finally와 같은 후속처리메서드 없이 동기처리처럼 사용할 수 있음

2. React컴포넌트의 라이프사이클

• 기존의 함수 컴포넌트는 클래스 컴포넌트와는 다르게 리액트의 라이프사이클 기능을 사용할 수 없었음. v16.8업데이트 이후에 Hooks가 도입되어 함수 컴포넌트도 라이프사이클 기능을 사용할 수 있게 됨

1. 라이프 사이클의 분류

• Did접두사가 붙은 메서드 : 특정작업을 작동한 후 실행되는 메서드
• Will접두사가 붙은 메서드 : 특정작업을 작동하기 전에 실행되는 메서드

1. 생성 (마운트)

• DOM이 생성되고 웹 브라우저상에서 나타나는 것
• 컴포넌트의 인스턴스가 생성되어 DOM상에 삽입될 때에constructor/static getDerivedStateFromProps()/render()/componentDidMount()가 순서대로 호출됨
• constructor: 컴포넌트가 마운트 되기 전에 호출됨, state초기화 / 인스턴스에 이벤트 처리 메서드를 바인딩함
• static getDerivedStateFromProps(): render메서드를 호출하기 직전에 호출됨, state를 갱신하기 위한 객체를 반환하거나 null을 반환하여 아무것도 갱신하지 않을 수도 있음.
• render(): 클래스 컴포넌트에 반드시 구현되어야 하는 유일한 메서드, 호출될 때마다 동일한 결과를 반환하고 브라우저와 직접적으로 상호작용을 하지 않음
• componentDidMount: 컴포넌트가 마운트된 직후에 호출됨. 브라우저 상호작업하는 작업을 수행 (데이터 구독)

2. 업데이트

• props/state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제 렌더링을 트리거 할 때 발생
• 컴포넌트가 다시 렌더링 될 때 static getDerivedStateFromProps()/shouldComponentUpdate()/render()/getSnapshotBeforeUpdate()/componentDidUpdate()가 순서대로 호출됨
• shouldComponentUpdate(): props또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기직전에 호출됨, 성능최적화만을 위해 사용됨
• getSnapshotBeforeUpdate(prevProps, prevState): 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출됨, 스냅샷 또는 null을 반환
• componentDidUpdate: 갱신이 일어난 직후에 호출 됨, 최초 렌더링에서는 호출되지 않음, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업이 이뤄짐

3. 제거 (언마운트)

• DOM에서 제거되는 것
• componentWillUnmount(): 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됨, 타이머 제거/네트워크 요청 취소/componentDidMount()에서 생성된 구독해제 등 정리작업 수행
• 컴포넌트 인스턴스가 마운트 해제되고 나면 다시 마운트 되지 않음