컴포넌트의 객체가 생성되어 DOM 상에 삽입될 때 아래 순서대로 호출된다.
constructor()
render()
componentDidMount()
props 또는 state가 변경될 때 컴포넌트를 다시 갱신해주어야 할 필요가 있다. 이 때 사용되는 메서드들이다.
static getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate(nextProps, nextState)
getSnapshotBeforeUpdate()
componentDidUpdate()
useState
클래스 컴포넌트에서처럼
state
를 생성하고 관리할 수 있다.
아래 사진과 같이 대괄호로 묶어 생성하고, 수정한다.
✅ 타입스크립과 함께 사용할 때
원하는 타입 구조의 인터페이스를 생성해주고 다음과 같이 정의해준다.
interface dataInfo {
name: string,
age: number
}
const [data, setData] = useState<dataInfo>()
const [data, setData] = useState<dataInfo>(Object)
const [data, setData] = useState<dataInfo[]>([])
useEffect
컴포넌트가 마운트 / 언마운트 / 업데이트 될 때, 컴포넌트가 렌더링 이후 수행해야 하는 일을 알려주도록 하는 함수
useEffect( () => {
// mount 시 실행할 함수
return () => {
// unmount 시 실행할 함수
]
}, [deps값]);
✅ deps 배열에 특정 state가 존재할 때,
1) 컴포넌트가 처음 마운트 될 때 호출
2) 컴포넌트가 언마운트 될 때 호출
3) 해당 state 값이 업데이트 될 때 호출
✅ deps 배열이 빈 배열일 때,
1) 컴포넌트가 처음 마운트 될 때 호출
프로젝트 진행 시 사용했던 코드와 함께 설명하겠다.
위 코드는 댓글 commentItem
또는 답글 recommentItem
각각에 추천/비추천의 개수가 변경될 때마다 item
에 commentItem
, recommentItem
을 저장해주어야 하므로 작성된 코드이다.
💡 deps 배열은 말그대로 배열이므로 여러 개의 변수가 할당되는 것이 가능하다.
commentItem
또는 recommentItem
이 들어오게 된다. commentItem
또는 recommentItem
의 값에 따라 setItem
함수를 통해 item
에 값을 저장하게 된다.