WeCode TIL - React Hook
React Hook???
훅이란 뭐냐? 갈고리다!! 말 그대로 훅을 이용해 component의 인생 중간중간에 참견을 할 수 있다
컴포넌트 등장하기전에 뭐해줘~
컴포넌트 사라지기전에 이거해줘~
업데이트되고 이거해줘~~
class형에서는 LifeCycle이었지만, React에서는 LifeCycle Hook라고한다.
이걸 왜 사용하냐????
- 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은데 이를 해결하기 위한 전통적 방법은 higher-order components와 render props가 있다.
각 컴포넌트의 state는 독립적이다. hook은 state그 자체가 아니라 상태 관련 로직을 재사용하는 방법이다.
- Class은 사람과 기계를 혼동시킨다?
Hook 사용 규칙
1.최상위에서만 Hook을 호출해야 한다. 또한, 반복문, 조건문, 중첩된 함수 내에서 hook 사용 금지!
import React, { useState } from "react"
function Hooks(props) {
if (!props.isExist) {
const [state, setState] = useState(); // Error!
}
const [state2, setState2] = useState(); // Error!
}
// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.
- 함수 컴포넌트 내에서만 Hook를 호출해야한다.
훅을 사용한다고 이미 작성된 코드에 필요한 변화사항은 없다. 선택적으로 사용해도되고, 100% 이전 버전과 호환이 되기때문이다.
State Hook
1. useState
const [state, setState] = useState(initialState);
const [state, setState] = useState(initialState);
상태 유지값과 그 값을 갱신하는 함수를 반환한다. 최초로 렌더링을 하는 동안, 변화된 state는 첫 번쨰 전달된 인자의 값과 같다.
setState함수는 state를 갱신할 때 사용한다.
setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);
Effect Hook
2. useEffect
useEffect(function);
useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)
useEffect(function);
useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)
useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 된다.
How to use useEffect!
useEffect(() => {
console.log("componentDidUpdate")
})
useEffect(() => {
console.log("componentDidMount")
return () => console.log("componentWillUnmount")
}, [])
useEffect(() => {
console.log("componentDidMount")
console.log("componentDidUpdate") // + shouldComponentUpdate
return () => console.log("???")
}, [state])
// WRONG!!
useEffect(() => {
console.log("CDM 쓰고 싶어요")
}, [])
useEffect(() => {
console.log("CDU 쓰고 싶어요")
}, [state])
Author And Source
이 문제에 관하여(WeCode TIL - React Hook), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yongjl/WeCode-TIL-React-Hook저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)