React(리액트) 티키타카 20 ( useState 훅 동작 감 잡아보기)

React

by e7e 2024. 12. 30. 20:26

React(리액트)에 쪼금 감각이 생겼다면

useState 훅(Hook) 동작을 괘니 이해하고 기뻐해보장.

https://dev.to/miki-digital/creating-a-usestate-hook-from-scratch-b39

윗글은 마구 마구 훌륭하당. 쓰기 전에 보았다면 좋았을 껄~~ 늦었당.

영어 공부도 할겸 추천한당. 비슷한 생각을 먼저 했으닝, 결국 난 루저!~~ ㅋㅋ

useState 훅 이해를 위해선 자바스크립트에서 클로저라 불리는 애를 이해한당.

(사실 난 closure란 용어를 모른채로 그냥 사용해 왔당.~~)

closure.html

<!DOCTYPE html>
<meta charset="UTF-8" />
<script>
  const AESPA = ["카리나", "닝닝", "윈터", "지젤"];
  // 멋지게 closure(클로져)라고 불리낭
  // 나에겐 원래 그냥 쓰던 특별히 이르미 없어었탕.
  function fCk() {
    let localCnt = 0; // 로컬(지역) 변수

    return function () {
      localCnt = localCnt > 3 ? 0 : localCnt;
      return AESPA[localCnt++];
    };
    // 리턴하는 함수가 로컬(지역) 변수를 잡고 안 놓아줌.
  }

  const seq = fCk();
  alert(seq()); // 카리나
  alert(seq()); // 닝닝
  alert(seq()); // 윈터
  alert(seq()); // 지젤
  alert(seq()); // ?
</script>

위 소스를 vscode에서 live server를 이용 실행한당, 보면 결과가 눈에 보인당.

일반적으로 함수(function) 안의 지역변수는 함수가 실행되고 나면

사라져야 한당. 근디 localCnt는 사라지지 않는당. 왱?

return 된 함수가 붙잡고 있당. 요따구로 쓰는 걸 멋진 맬로 closure라 부르공,

closure의 원리가 되는 return 된 함수의 scope 안에 지역변수가 있는 걸

멋지 말로 scope chainning 이라 부르는뎅, 사실 용어는 그리 중요하지 않당.

쿨하게 받아들이고, 느낌있게 사용하면 실무자는 캡짱이당.

구조분해는 당근 이미 이해와 동행하여 알고 있음이당.

모른다면 잠시 아래 글에 다녀오장, 배열 구조 분해만 이해하고 왔단당.

2023.06.14 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..)

그라믄 다음 단계로 가보장.

useState 훅은 값과 함수를 가진 배열을 리턴해야 한다.

그래야 배열로 받아서 구조분해 가능하당.

useState이해1.html

<!DOCTYPE html>
<meta charset="UTF-8" />
<script>
  let gState; // 상태저장 전역변수
  // 생각해 보장
  function useState(iniVal) {
    // gState = iniVal 이렇게 하면 항상 초기화 되버림
    // 처음 MyApp이 불릴때만 실행, 그 뒤론 값이 존재하기 때문에 안불림
    if (!gState) gState = iniVal; 
    return [
      gState,
      (newVal) => {
        gState = newVal;
      },
    ];
  }

  // 요거이 main.jsx에서 부르는 app.jsx라 생각하당
  function MyApp() {
    const [name, setName] = useState("e7e");

    return {
      name: `이름용? ${name}`,
      setName,
    };
  }

  let app = MyApp();
  console.log("체킁:", app);
  console.log("초기값:", app.name);

  app.setName("메롱");
  // MyApp 다시 호출 (곧 rerendering에 비유) => 아두 중요!!
  app = MyApp();
  console.log("변경후:", app.name);
</script>

실행 결과 console을 확인하면 아래와 같을 진데... 원하는 결과당당.

useState 함수 안, 아래 if문 덕분에 MyApp이 여러번 불리고, 그 안의 useState가 호출 되어도

gState가 값이 없을 때, 곧 처음에만 gState에 값이 들어가고, 그 다음에는 안 들어간다

곧 다시 초기화 되지 않고, return 되는 함수 (newVal) => { gState = newVal } 에 의해서만

값 변경이 가능하당. 오케이? 눈이 잘 따라가야 함, 못 따라 가면 console.log를 활용하랑.

if (!gState) gState = iniVal;

만족하긴 이르당. useState가 한번만 쓰일리가 만무하당.~~ ㅠㅠ

그래서 useState로 저장하는 변수는 index 곧 순서를 이용하고,

이것 덕분에 훅(hook) 함수 들은 여러가지 제약사항들이 발생하게 된당.

최종 참고할 만한 코드를 보장.

useState.html

<!DOCTYPE html>
<meta charset="UTF-8" />
<script>
  let gState = []; // 상태값들을 저장할 배열
  let gIndex = 0; // 배열 index 조정 필요
  function useState(iniVal) {
    const lIndex = gIndex;
    if (!gState[lIndex]) {
      gState[lIndex] = iniVal;
    }

    gIndex++; //index증가, MyApp 안에서 useState가 여러개이면

    return [
      gState[lIndex],
      (newVal) => {
        alert(`체킁  ${lIndex}  ${gState[lIndex]}`);
        gState[lIndex] = newVal;
      },
    ];
  }

  function MyApp() {
    const [name, setName] = useState("e7e");
    const [age, setAge] = useState(20);

    return {
      name: `이름이용 ${name}`,
      setName,
      age: `나이용? ${age}`,
      setAge,
    };
  }

  let app = MyApp();
  console.log("상태 체킁:", app);
  console.log(app.name);
  console.log(app.age);
  console.log("======= 상태변경 ======= ");

  app.setName("메롱"); // 값 변경
  app.setAge(23); // 값 변경

  gIndex = 0; // 다시 초기화 해줘야 함
  app = MyApp(); //                   * Re-Rendering
  console.log(app.name);
  console.log(app.age);
  console.log("======= 상태변경 ======= ");

  app.setName("경미니"); // 값 변경
  app.setAge(24); // 값 변경

  gIndex = 0; // 다시 초기화 해줘야 함
  app = MyApp(); //                 * Re Rendering
  console.log(app.name);
  console.log(app.age);
</script>

결과는 아래와 같당. 느끼미 좀 멀수도 있당. 차근 차근 코드를 다시 보기 바란당.

특히 lIndex 지역변수 사용부분을 잘 보기 바란당. 굳이 왜 저따위로 써야만 했는지?

느끼미란 친구가 왔다면, 너무 빨리 보내지 말고, 한동안은 손잡고 놀아주장.

내는 나라서 나를 너라고 부른당.

너는 내라서 나의 너를 모른당.

나는 너라서 나를 색안경을 끼고 본당.

너는 나라서 너를 색안경을 끼고 본당.

색안경 vs 색안경

또 다른 너의 무더기 색안경들~~

Who are you? Who am I?

https://www.youtube.com/watch?v=Xmxcnf2v_gs

'React' 카테고리의 다른 글

React(리액트) 티키타카 19 ( FullCalendar) (3)	2024.12.29
React(리액트) 티키타카 18 ( rc-tree 트리 컴포넌트) (6)	2024.12.25
React(리액트) 티키타카 17 (react-quill-new 에디터) (0)	2024.12.25
React(리액트) 티키타카 16 (DHTMLX Gantt 차트) (0)	2024.12.21
그냥 E7E만 보는 클릭킁 체킁 (0)	2024.10.26