useState의 모의 구현 (simplified version)

useState의 모의 구현 (simplified version)

let state; // 상태를 기억하는 공간

function useState(initialValue) {
  if (state === undefined) {
    state = initialValue; // 초기값 설정 (단 한번만)
  }

  function setState(newValue) {
    state = newValue;
    render(); // 컴포넌트를 다시 그려주는 함수 (React 내부에 있음)
  }

  return [state, setState]; // 배열로 반환 → 분해할당으로 사용
}

 설명:

• state라는 변수를 통해 값을 저장
• setState를 호출하면:
  • 값을 바꾸고
  • 화면을 다시 그려줌 (render() 호출됨)
• 이걸 [값, 바꾸는 함수] 형태로 반환함 → 우리가 분해할당으로 꺼내 쓴 거!

---

실제 React는 이렇게 작동함

• 컴포넌트마다 state를 저장하는 별도의 공간이 있음 (Hook 상태 트래킹)
• useState()를 호출할 때마다 고유한 인덱스로 그 상태를 관리
• setState()가 호출되면 → React는 해당 컴포넌트를 다시 렌더링함

 

 

useState함수가 동작 되는 방법!!

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>
  {count}
</button>

 

1. 컴포넌트 처음 실행

[임시파일1.js]
let state; // 상태를 기억하는 공간

function useState(initialValue) {
  if (state === undefined) {
    state = initialValue; // 초기값 설정 (단 한번만)
  }

  function setState(newValue) {
    state = newValue;
    render(); // 컴포넌트를 다시 그려주는 함수 (React 내부에 있음)
  }

  return [state, setState]; // 배열로 반환 → 분해할당으로 사용
}

[임시파일2.js]
const [count, setCount] = useState(0);

• state === undefined이니까
• state = 0 으로 초기값 저장됨
• setState 함수도 같이 만들어서 반환됨

→ 이 결과가 [0, setState함수]로 반환돼서 → 우리가 count, setCount로 분해해서 씀

 

2. 버튼 클릭 (이벤트 발생)

onClick={() => setCount(count + 1)}

여기서 setCount는 사실 누구?

👉 useState() 안에서 만들어진 setState() 함수야!

function setState(newValue) {
  state = newValue;  // 값 바꾸기
  render();          // 화면 다시 그리기
}

 

실행하면:

1. state = count + 1 (예: 0 → 1)
2. render() 실행됨 → 화면이 다시 그림
3. 다시 useState() 호출되지만, 이번엔 state가 이미 있으니까 → if (state === undefined)는 패스 → 그냥 기존 값(state)을 유지함

🔁 그럼 다음 렌더에서는?

const [count, setCount] = useState(0);

 

• 여기서 useState(0)이지만 state가 이미 1로 되어 있음
• 따라서 초기값 0은 무시됨 → 그냥 state가 그대로 반환됨
• 그래서 화면에는 count = 1로 표시됨 

✅ 마무리 정리

• setCount()는 useState() 안에서 만들어진 상태 변경 함수야.
• 클릭하면 setCount(새값)이 실행되고, 내부에서:
  • state = 새값 저장
  • render()를 호출해서 화면을 다시 그림
• 다음 렌더링 때도 state 값을 유지하기 때문에 초기값은 무시됨