React-hooks API 마스터
먼저 React-hooks는 Function Component에서 사용가능하고, Lifecycle Method를 이용할 수 있는 최신 문법이다.
기존의 class component는 호출이 한번 되면 맴버변수 또한 호출된 처음을 제외하고는 다시 호출 되지 않는다. 데이터 변화에 따라 랜더 함수만 여러번 호출되고, 맴버변수는 일회성 호출이다. 그러나 function Component는 호출이 되면 함수 전체가 데이터 변화에 따라 호출이 된다. 여기서 데이터 변화에 따라 호출이 된다면 초기값으로 다시 셋팅되어 브라우저에 값이 나타나지 않는 이유는 react에서 메모리의 마지막 변화를 감지하여 브라우저에 전송해주기 때문이다.
📌 useState
const [count, setCount] = useState(0);
const [post, setPost] = useState([{name : A, age : 20}]);useState는 기존값과 변화할 수 있는 값을 불러오고, useState를 선언한다. 그리고 초기값을 설정해줄 수 있는데, primitive type의 값이 아닌 배열을 이용해 오브젝트로 값을 넣어줄 수도 있다.
📌 useCallback
const addHandler = useCallback(()=>{
console.log(`useCallback`)
},[])useCallback은 데이터가 변할때마다 호출되는 콜백함수를 변화된 데이터 값이 입력이 됐을때 실행시켜서 랜더링 성능을 최적화할 때 사용된다.
두개의 파라미터를 실행시켜줘야하는데 첫번째 파라미터에서는 생성하고 싶은 함수를 넣어주고, 두번째 파라미터에는 배열을 넣어줄 수 있는데, 어떤 값이 바뀌면 useCallback을 실행시켜줄 것인지 결정할 값을 넣어준다. 빈배열을 넣게 되면 랜더링 될때 한번만 함수가 실행되고, 항목을 넣는다면 넣은 항목이 바뀔때마다 함수를 실행시켜준다.
📌 useEffect
useEffect=(()=>{
},[])componentDidMount와 componentDidUpdate를 합쳐놓은 api라고 할 수 있다. mount 됐을때와 업데이트 됐을때 lifecycle method를 따로 작성하면 중복코드가 발생할 수 있었는데 useEffect는 두가지를 합친 method이기 때문에 중복을 제거할 수 있다.
mount가 됐을때만 실행하고 싶다면 두번째 파라미터에 빈배열을 넣어주면 되지만, 값이 변경됐을때 update실행하고 싶다면 두번째 파라미터에 해당하는 값을 넣어주면 된다.
📌 useRef
const inputRef = useRef();
return(
<form>
<input type="text" ref={inputRef}/>
</form>
)해당하는 값을 알고 싶을때 사용한다.
CreateRef와 같은 사용법이다.
useRef를 선언하고, 변수명을 해당하는 jsx의 값에 ref로 입력한다.
해당 포스트에 잘못된 정보가 있다면 댓글 남겨주세요!
