실행 컨텍스트
실행 컨텍스트란, JavaScript코드를 읽고, 읽은 코드를 실행할때 필요한 값, 함수, 클래스 등을 컴퓨터가 사용 할 수 있도록 메모리에 올려 놓을때 만들어 지는 것 입니다.
코드가 있는 disc에서 ram으로 ram에 이 실행 컨텍스트를 생성 및 저장 해서 저장된 실행 컨텍스트를 연산장치로 보내서 해석 엔진을 사용해 연산을 한다고 생각 하시면됩니다.
실행 컨텍스트 작동 순서.
- 생성
코드를 읽고 해당 파일의 실행 컨텍스트를 초기화 및 생성 합니다.
1-1 변수와 함수 선언문을 찾아서 값이 없는 채로 메모리에 값을 저장 할 공간을 확보 해 둡니다.
1-2 각 변수, 함수간의 상관 관계를 위해 각각의 개체마다 범위(스코프)와 스코프 체인을 만듭니다.
1-3 이 스코프를 기준으로 this 값이 어떤것을 가리키는지 설정합니다.
이 과정중에서 그 유명한 호이스팅도 포함됩니다.
2.할당
메모리에 확보된 각각의 변수 공간에 값을 할당 합니다.
이때 할당받지 못한 값들은 undefined처리됩니다. 코드를 작성할때 undefined가 나온다면 이부분을 의심해보면됩니다. 할당 해준적이 없거나 할당 되기전에 호출 한 것이지요.
- 실행
메모리에 할당된 변수의 값과 함수에 대한 코드가 실행되는 순서입니다.
코드가 실행되고 함수가 작성된 코드의 순서에 맞게 실행되며, 값이 반환됩니다. 이때 위에서 설정해둔 스코프 영역에 맞춰 실행됩니다.
이런 실행 컨텍스트는 메모리에 차곡차곡 쌓이게 되는대 스택구조로 되있으며 filo
즉 첫번째로 들어와서 마지막에 나간다 입니다
스택의 가장 윗부분이 항상 먼저 빠져나갑니다.
이는 비동기가 없다는 가정하에서는 스택에 들어온 마지막 연산을 우선실행 하여 처리합니다.
비동기 처리
비동기 처리는 조금 다릅니다.
비동기 처리 또한 3단계에서 실행되지만, js해석 엔진이 비동기 처리를 특별 취급하는대, 이벤트 루프라는 격리된 스택에다가 보냅니다.
한마디로 스택이 2개라는 거지요.
위 그림과 같이 비동기 처리되는 것들은 따로 보관되어 처리되며,
특징1
이 비동기 처리되는 함수나 실행문은 개발자가 따로 제어해 주지 않는다면, 다른 코드를 실행을 하는 동시에 실행합니다.
이때 동시에 라는 단어가 이상할텐대, js는 싱글 스레드지만, 연산 시간을 잘 계산해서 잘게 쪼게어 실행순서를 만들어 하나의 프로세스로 처리됩니다.
(js 논 블로킹 검색하면 나옴)
특징1의 경우는 promise문을 이용하지 않을때의 경우이며 이때는 콜백함수로 비동기 처리를 하는 경우가 대다수 입니다.
특징2
비동기 처리는 보통 특정 조건이 달성 될때 다음 문장이 실행 되도록 해야 할떄 사용하는 특징을 가집니다.
왜 개발자가 그렇게 짜야하냐면, 다른 서버와 통신 완료되어야 하거나 특정 함수의 연산이 완료되어 결과가 나와야지만 다음 연산을 시작 할 수 있는 경우에 해당 부분을 비동기 처리 시킵니다. 이는 위에 올려놓은 그림이 그 예시입니다.
물론 이는 백그라운드로 진행되며, 해당 비동기와 연관 없는 코드들은 여전히 동시에 실행될 것 입니다.
하지만 비동기 처리된 scope 영역에서는 개발자가 지정한 순서대로 실행됩니다.
js에서는 주로 promise문으로 제어됩니다.
(이때 promise문은 여러 추가 메서드가 존재합니다.)
왜 이런 실행 컨텍스트 순서를 알아야 하냐면,
web app 의 경우
render()나 return<></>과 같은 코드 들은 이 3번 과정에서 실행됩니다.
3번 과정에서 만약 fetch할 것이나, 연산 할 값이 있다면 반드시 순서를 잘 지켜 코드를 짜야합니다. 그래서 이 글을 쓴것입니다.
전 함수형 리액트를 배웠기 때문에 특히나 useEffect와 같은 hooks를 사용할때 실행 컨텍스트와 mount 순서를 지켜가며 코드를 짜곤 합니다.
이 사실들을 몰라서 처음엔 고생 깨나 했습니다.
리액트 사용자의 시점
훅스는 함수 취급받으며,
1번 단계에서 생성되며
2번단계에서 정의되고
3번단계에서 실행됩니다.
이렇게 생성된 훅스들은 3번 단계가 끝 난 다음 실행될수도 있고 3단계가 실행 되고있는 와중에 실행 될수도있으며, 이것은 훅스마다 다른 조건을 가집니다.
구체적으로는 렌더링에 달렸습니다.
리액트 컴포넌트의 렌더링은 실행 컨텍스트의 3단계에서 jsx생성 메서드 결과로 나온 js 코드 들을 실행해서 렌더링 되어집니다.
이 렌더링이 끝나야지만 state를 처리하는 훅스들의 값이 계산됩니다.
이때 렌더링은 3단계가 끝나고 나서 완료될 수도 3단계를 처리하는 도중 완료 될 수도있습니다.
useEffect또한 크게 다르지 않습니다. 단지 effect 훅스는 다른 훅스에 비해 unmount 시점에서 뭔가를 더 할수 있다는 점이 차이점이며, 실행 컨텍스트의 3단계가 끝난 이후에 실행됩니다. 즉 컴포넌트 최초 렌더링 직후의 시점에 실행됩니다.
