[React] 왜 상태값이 바뀌면 리렌더링될까? (feat. Closure)

 

 

🍋 서론

---

리액트를 잘 사용하는 단계는 거쳤고, 당연한 것들에 왜?라는 질문들 마구 던지는 요즈음,

리액트가 리렌더링 되는 시점, 즉 상태값과 프롭이 업데이트되는 시점에 어떠한 일들이 일어나는지 궁금해졌다.

흩어져있던 컨텍스트-클로져-리액트 퍼즐을 맞출 수 있는 시간이었다.

 

 

🍋 사전 지식

---

클로져란 무엇인가? 내가 생각하기에는 어떠한 모먼트이다. 렉시컬 스코프 밖에서 렉시컬 스코프 내부를 기억하고 접근할 수 있는. 이 말에 대한 설명이 와닿지 않다면 아래 🍋 전역 컨텍스트 & 함수 컨텍스트 부분부터 읽어보길 추천한다. 

 

 

🍋 useState 훅이 어떻게 생겼는가

---

아래는 바로 사용은 익숙하지만, 어떻게 생겼는지는 생소한 useState 훅의 생김새이다. (코드참고링크)

const React = (() => { 
  let val; // -- 1
  const useState = (initialValue) => {
    val = val || initialValue;
    const setState = (newVal) => {
      val = newVal;
    };
    return [val, setState];
  };
  return { useState }; 
})();

const App = () => {
  const [state, setState] = React.useState(0); // -- 2
	setState(1) 
  return <></>
};

React 함수는 React 라이브러리를, 그 내부 useState 함수는 useState 훅을 지칭한다.

이때 쓰인 useState 함수는 클로져 함수로, 그 상위 스코프에 있는 let val; 변수를 참조한다.

App 함수는 App 컴포넌트를 의미한다.

내부에서 사용된 state와 setState는 React 함수 내 useState 함수에서 반환한 상태값과 세터 함수를 지칭하고, 이 둘은 같은 스코프를 공유한다.

setState는 계속해서 동일한 상위 val 값을 업데이트시키게 되고, 그 값은 setState 함수가 사용된 스코프에서 공유된다.

하지만 state 변수는 업데이트 이전에 값이 저장된 상태로, state에서 계속해서 업데이트된 값을 보여주기 위한 방법이 필요하졌다.

이때 setState 함수에서 상태값 즉, 내부 val 변수에 변화가 있을 때마다 컴포넌트를 리렌더링 시켜주게 되면, useState 훅이 사용된 시점의 코드 (2)가 또 한번 실행되기 때문에 state를 동기적으로 업데이트 시켜줄 수 있게된다.

 

🍋 한줄 요약!

---

리렌더링은 상태값의 동기적인 시각적 업데이트를 위한 불가피한 선택인 것 같다! 땅땅땅

참고자료:

useState 동작 원리

 

 

🍋 전역 컨텍스트 & 함수 컨텍스트?

---

코드를 처음 실행하는 순간 모든 것(전역 스코프, 그곳에서 유효한 변수 등 전역적으로 관리되는 정보)을 관리하는 환경인 전역 컨텍스트가 생성되고 이는 페이지가 종료될 때까지 유지됩니다.

그리고 코드에서 각 함수를 실행할 때마다 함수 컨텍스트가 하나씩 생기게 되는데 그 안에 함수에 대한 정보 즉, 변수, 스코프 체인, this가 생성된다.

특정 함수 컨텍스트에서 변수를 찾을 때 전달받은 객체에 없다면 스코프 체인을 따라 올라가며 찾게 됨.

클로저 함수를 제외하고 함수 실행이 완료되면 해당 함수 컨텍스트는 사라집니다.

 

🍋 스코프?

---

참조될 수 있는 유효한 범위를 뜻합니다. 예를 들어 변수 A의 스코프 == 변수 A가 참조될 수 있는 유효한 범위입니다.

스코프와 관련해서 기억해야할 키워드가 있습니다.

1. 암묵적 전역(implied globals):

변수 앞에 타입을 지정해주지 않으면 암묵적 전역변수가 됨.

function foo() {
  x = 1;   // Throws a ReferenceError in "use strict" mode
  var y = 2;
}

foo();

console.log(x); // 1
console.log(y); // ReferenceError: y is not defined

b. 렉시컬 스코핑(Lexical scoping):

함수를 처음 선언하는 순간에 함수 내부의 변수는 **자기 스코프로부터 가장 가까운 곳(상위 범위)**에 있는 변수를 계속 참조하게 된다.

var number = 1234

function printNumber() {
  console.log(number);
}

function wrapper() {
  var number = 4321
  printNumber();
}
wrapper(); //1234

c. 스코프 체인(Scope chain):

스코프 A안에 스코프 B, 스코프 B안에 스코프 C ← 이렇게 체인 형태의 스코프 구조를 지칭하는데, 가장 이너 스코프에서 아우터 스코프 변수 참조 시 안에서 → 밖으로 검색을 하게 된다.

 

🍋 클로져?

---

클로져의 어원인 closed는, 닫혀있다, 즉 자유 변수가 함수에 닫혀있다는 의미로 쓰입니다.

클로져는 현상을 지칭한다고 생각합니다. (이 현상이 나타나는 함수를 클로져 함수라 부르기도함.)

자바스크립트 엔진 내에서 돌아다니는 가비지컬렉터가 참조되고 있지 않은 변수들을 수집 & 삭제를 하고,

그렇지 않고 참조되고 있는 변수들을 수집 대상에서 제외가 됩니다.

그런데 많은 경우들 중에서 아우터함수가 종료되더라도 이너함수가 아우터함수의 변수를 계속 참조하고 있는 경우

가비지컬렉터의 수집 대상에서 제외되어 접근이 가능해지는데, 이 현상 자체를 클로져라 부릅니다

const counter = function() { // outer 함수
  let count = 0;
  function changeCount(number) { // inner 함수 
    count += number;
  }
  return {
    increase: function() { // 더 inner 함수
      changeCount(1);
    },
    decrease: function() {
      changeCount(-1);
    },
    show: function() {
      alert(count);
    }
  }
};

const counterClosure = counter(); 
// 아래 모든 메소드는 아우터 함수의 변수를 참조하므로 클로져 함수라 부를 수 있습니다 
counterClosure.increase();
counterClosure.show(); // 1
counterClosure.decrease();
counterClosure.show(); // 0

클로져 함수와 함께 잘 등장하는 “커링 (Currying)”이라는 개념이 있습니다. 인자를 여러개 필요로하지만 모두 한번에 받아오지 못하는 경우, 클로져 효과를 이용해서 외부 함수 변수의 값을 고정시킨 후 특정 인자를 재사용할 수 있습니다.

function firstRank(a){
    return function secondRank(b){
        return function thirdRank(c){
            return {"1등":a, "2등": b, "3등": c}
        }
    }
}

let secondRank = firstRank("juyeon")
let thirdRank = secondRank("songkang")
let result = thirdRank("miumiu")
console.log(result)