JayGo 개발 연습장

useState에 대해서useState 구현 내용을 살펴보기 전에, 구현해야 할 훅에 대해 간단하게 정리해 봤다.리액트에는 상태가 변경되면 화면을 리렌더링 해주는 '선언적 UI 방식'이 사용된다. 그리고, 이를 위해 리액트는 자신이 관리해야 할 상태가 어떤 것인지를 알아야 한다.컴포넌트 내부에서 선언된 일반 변수는 리액트가 관리하는 상태로 등록되지 않았기 때문에 리액트가 변화를 추적하지 못하고, 값의 변화에 대한 리렌더링 동작을 처리해주지 못한다. 이런 상황에서 useState가 사용된다. useState는 리액트가 변화를 추적할 상태를 생성할 때 사용된다.import { useState } from 'react'const App = () => { const [count, setCount] = useS..

useState와 useEffect는 리액트 개발에서 밥 먹듯이 사용되는 훅이다. useState는 '상태와 상태 업데이트 함수를 정의하는 훅'이고, useEffect는 '리렌더링 후 부수 효과를 처리해 주는 훅'인데, 각각에 대한 정의와 사용법은 알고 있지만 정확한 동작에 대해선 이해하는 데 어려움이 많았다. 이번 포스트에선 해당 내용에 대해 최대한 상세하게 정리해두려 한다.useState 상태 업데이트 과정아래와 같이 상태를 정의해뒀다.input 태그에서 onChange 이벤트가 발생할 때마다 상태를 변경해 준다. 실제로 상태가 잘 변경되는지 확인하기 위해 useEffect도 함께 사용해 줬다.import { useEffect, useState } from 'react';const App = () =..