useState, useEffect

useState

 

- 컴포넌트의 상태

- 기본적으로 데이터가 저장되는 곳

- 변수 대신 쓰는 데이터 저장공간

- 문자, 숫자, array, object 다 저장가능

- 웹이 App처럼 동작하게 만들고 싶음 

- state는 변경되면 HTML이 자동으로 재렌더링됨

- 자주 바뀌는 중요한 데이터 state로 사용 

import {useState} from "react";  //리액트 내장함수 사용

const [state, setState] = useState("초기값"); 
//state: (=초기값) 데이터, setState: 데이터를 변경하는 함수

 

 

useEffect

 

Mount: 화면에 첫 렌더링

Update: 다시 렌더링

Unmount: 화면에서 사라질때 

 

useEffect( ( ) => { } )

인자로 콜백함수를 받음 

콜백함수란 다른함수의 인자로 전달된 

useEffect ( () => {
//작업
});

렌더링 될때마다 실행

 

useEffect( () => {
//작업
}, [value]);

디펜더시어레이

화면에 첫 렌더링 될 때 실행

value값 변경 될 때 실행

useEffect( () => {
//작업
}, []);

마운팅 될 때만 실행