상태(useState)와 useEffect

컴포넌트마다 데이터를 보유하고 관리할 수 있는데 리액트에서는 이를 상태 라고한다.

 

리액트에서는 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 변경할수있다.

 

1. useState

리액트는 이 상태(state)로 관리되는 데이터가 변경되면 화면이 변경되게 된다. (화면에 데이터에 따라 변경된다)

 

UI = component(state)

즉, 사용자 화면 (UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다라는 뜻!

 

 

2. useEffect

useEffect는 리액트에서 자주 사용되는 기본함수이다.

 

*기본형태

useEffect (() => {

  화면이 그려진 다음 가장 먼저 실행항 코드 작성 

} , []})

 

보통 데이터를 준비할 때 사용하며, 데이터를 서버로부터 혹은 다른 어디선가로부터 받은 후 상태(state)에 반영한다.

 

1) 화면이 먼저 그려진다.

2) useEffect 데이터를 준비한다.

3) 상태 데이터가 업데이트 되었으니 다시 화면이 그려진다.

 

주로, 화면이 그려진 다음 서버로부터 필요한 데이터를 요청하여 받은 후 화면을 다시 그릴때 자주 사용한다.