안녕하세요~ totally 개발자입니다. useEffect Hook (훅) 저번 시간에는 useState에 대해 살펴보았고 이번에는 useEffect Hook에 대해 살펴보도록 하겠습니다. 앞서 클래스형 컴포넌트에는 생명 주기(Lifecycle)가 있다고 이야기하였습니다. 이를 함수형 컴포넌트에서도 사용할 수 있도록 도입된 것으로 먼저 클래스형 컴포넌트에서의 생명주기(Lifecycle)에 대한 이해가 필요합니다. 간단하게 정리하면 아래 표와 같습니다. 단계 의미 클래스형 컴포넌트 사용 예제 함수형 컴포넌트 사용 예제 componentDidMount 컴포넌트가 마운트되었을 때, 마운트(Mount)란 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미 componentDidMount() {} useEffe..

안녕하세요~ totally 개발자입니다. State 함수형 컴포넌트 State(상태)에 관해 살펴보도록 하겠습니다. 리액트는 컴포넌트를 조합하여 페이지를 만들어가는 방식이고 각각의 컴포넌트의 상태를 관리해서 업데이트하는 방식입니다. 바로 useState를 사용하면 되는데, 기존에 만든 form을 사용해서 form이 제출되었을 때 아래에 입력한 사용자의 정보를 출력해줄 수 있도록 상태를 업데이트하여 UI를 재랜더링해줄 수 있도록 합니다. 기존 클래스형 컴포넌트에서는 setState를 사용해서 업데이트하는 반면 함수형 컴포넌트의 useState를 사용하는 경우에는 setState용의 함수를 지정하기 때문에 그 함수를 사용해서 업데이트해야 합니다. Step 1: 먼저 import React, { useStat..