useEffect
컴포넌트가 렌더링 된 이후 비동기적으로 처리되어야 하는 효과들을 side effect 라 부른다.
예를 들어, 서버로부터 어떤 데이터를 가져오는 경우 화면을 구성하는 부분 먼저 렌더링이 이루어지고 그 다음 실제 데이터는 비동기로 가져오게 된다.
이렇게 하면 API 응답이 늦어지거나, 아예 응답이 없는 경우에도 이미 화면을 구성하는 부분은 렌더링이 되어있기 때문에 보다 좋은 사용자 경험을 제공할 수 있다는 장점이 있다.
컴포넌트는 생성, 생성된 상태, 파괴될 때 (Mount, Updating, Unmount) 3가지 값을 가진다.
useEffect 를 사용하면 side Effect 처리와 각 생명주기 별로 해야하는 기능에 대한 부분을 구현할 수 있다.
useEffect(() => {
console.log("Counter 컴포넌트가 생성된 상태입니다.");
if (count > 0) {
console.log("Counter 업데이트 되었습니다.");
}
}, [count]);[count]이 부분이 바뀔때마다 useEffect 가 실행된다.
import {useState} from "react";react 의 import 에는 {} 문법을 쓴다.
useState
const [count, setCount] = useState(0);count = 현재 값
setCount = 업데이트 값
useState(0) = 초기 값
setCount 를 변경시킬 때 마다, count 의 값이 바뀐다.
map
자바스크립트 배열에서 반복되는 요소를 처리할 때 map 함수를 사용한다.
// i가 쓰이지 않는 경우에는 v만 작성합니다.
const squareArray = array.map((v) => {
return v * v;
});위와 같은 방법으로 사용하면 v의 제곱값을 return 하게 된다.
배열의 요소를 하나하나 탐색하고 가져온 인자를 재 가공하여 사용할 수 있다.
