React 2
[React] useState 동작 원리
useState의 동작 원리를 이해하면 개발을 하는데 도움이 될 것 같아서 useState 동작 원리를 정리해보았다. useState 동작 원리 useState는 상태를 변경하기 위해 setState를 호출하면, 호출 즉시 상태가 변경되지 않는다. 다시 말해서 비동기적(Asynchronous)으로 동작한다. 코드를 통해 자세히 살펴보자. 좋아요 버튼을 클릭하면 setLiked(liked + 1)을 두 번 호출하게 handleClick 함수를 구현했다. const App = () => { const [liked, setLiked] = useState(0); const handleClick = () => { setLiked(liked + 1); setLiked(liked + 1); }; return ( 좋아..
[React] useEffect
useEffect useEffect는 함수 컴포넌트에서 side effect(부수 효과)를 수행할 수 있는 Hook이다. useEffect를 사용하면 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 업데이트 되었을 때 특정 작업을 수행할 수 있다. 기본 문법 useEffect의 기본 문법은 다음과 같다. useEffect(function, deps); function: 수행하고자 하는 작업 deps: 검사하고자 하는 배열 (배열에 특정 값을 넣으면 해당 값이 변경될 때만 function 실행) 컴포넌트가 마운트 되었을 때 컴포넌트가 마운트 되었을 때 특정 작업을 수행하고 싶은 경우, deps에 빈 배열을 넣는다. import React, { useEffect } from 'react' ..