Overview 웹 레이아웃을 짜다 보면 남은 시간을 표시하는 타이머를 표시해야 할 때가 종종 있습니다. 로그인 시 이메일 인증이나 SMS 인증을 할 때, 세션 만료까지 남은 시간을 표시해주어야 할 때도 있고, 브라우저에서 동작하는 간단한 게임을 만들 때 게임 종료 시까지 남은 시간을 표시해주어야 할 때도 있습니다. 자바스크립트에는 특정한 시간마다, 혹은 특정 시간이 지난 후에 callback함수를 호출할수 있는 setInterval, setTimout이라는 내장 함수를 제공하기 때문에, 이를 이용해서 타이머를 구현할 수 있습니다. 하지만, 싱글 스레드로 동작하는 자바스크립트의 특성상 setTimeout, setInterval이 항상 정확한 시간에 호출되지는 않기 때문에 브라우저에서 처리하는 일들이 많은..

Overview 이번 포스팅은 리액트 함수형 컴포넌트에서 단순히 다음 두 함수의 실행결과가 다른 이유를 명확히 찾아내기 위해서 작성하게 되었습니다. App.js import React, { useState } from "react"; export default function App() { const [count, setCount] = useState(0); const increase1 = () => { setCount(count+1); setCount(count+1); setCount(count+1); } const increase2 = () => { setCount(count => count + 1); setCount(count => count + 1); setCount(count => count +..

Overview React Hooks는 React Functional Component(함수형 컴포넌트)에서 상태관리 및 컴포넌트 생명주기 API(Lifecycle API) 등 클래스 컴포넌트에서만 지원했던 기능들을 사용할 수 있도록 도와줍니다. 함수형 컴포넌트는 클래스형 컴포넌트에 비해 선언하고 사용하기가 편리하며, 코드를 간결하게 사용할 수 있고, 메모리를 비교적 덜 사용하는 등의 여러 장점들이 있기 때문에 최근에 많이 사용되는 추세인데, 여기에 클래스 컴포넌트에서만 사용가능했던 기능들을 Hooks가 지원하면서 함수형 컴포넌트의 효용이 더 높아졌다고 평가되고 있습니다. 이번 포스팅에서는 함수형 컴포넌트에서 상태관리를 할 수 있도록 도와주는 useState 메소드에 대해서 알아보고, 이 메소드가 내부적..