Hooks Intro
Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
- Hook은 class 안에서는 동작하지 않는다.
- class 없이도 React를 사용할 수 있게 해주는 것
class형 컴포넌트 VS Function 컴포넌트
class component :
1. props와 state 모두를 가지고 사용할 수 있으며, props에 접근하기위해서 this키워드를 사용한다.
2. componentWillMount나 componentDidMount 와 같은 lifecycle메소드를 사용할 수 있다.
functional component:
1. props에 접근하고 사용할 수 있지만, state를 가질 수 없다.
2. lifecycle method를 사용할 수 없다.
3. this 키워드를 사용할 수 없다.
-> 함수는 상태를 저장하지 않으므로 클로저를 통해서 state, 라이프사이클 구현
Hooks 사용 규칙
-
최상위에서만 Hook을 호출해야한다.
또한 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. -
React 함수 컴포넌트 내에서만 Hook을 호출해야한다.
State Hook
useState
const [state, setState ] = useState(initialState);
state는 첫번째 전달된 인자인 initialState의 값과 같다.
setState함수는 state를 갱신할 때 사용한다.
예를 들어서
버튼을 클릭할 때마다 숫자가 커지게 해주는 함수를 만들어줄 때
초기값을 0으로 주고 onIncrease함수를 버튼에 onClick으로 적용시키고 누를 때 마다 setCount가 1씩 증가하도록 해주었다.
(더 자세한 설명은 2차 프로젝트 후기에 기록할 예정)
Effect Hook
componentDidUpdate, componentWillUnmount 와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.
useEffect
useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는지를 말한다. 리액트는 우리가 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것이다.
useEffect(function);
useEffect(() => {}, [count]
//의존성 배열 (배열 안에 담긴 값들을 추적, 그때마다 업데이트)useEffect는 여러가지 라이프 사이클이 합쳐진 형태로 설명할 수 있다.
- componentDidMount (의존성 배열 : [])
- shouldComponentUpdate ( 의존성 배열 내에 해당 사항이 없을 경우)
- componentDidUpdate (의존성 배열 자체가 없거나, 해당 사항이 있을 경우)
- componentWillUnmount
component가 mount 됐을 때
컴포넌트가 화면에 가장 처음 렌더링 될 때 한번만 실행하고 싶을 때는 의존성 배열 위치에 빈 배열을 넣는다
useEffect(() => {
console.log('렌더링 될 때 마다 실행된다');
});만약 배열을 생략한다면 리렌더링 될 때마다 실행된다.
useEffect(() => {
console.log('렌더링 될 때 마다 실행된다.');
});component가 unmount될 때
cleanup함수 반환 (return 뒤에 오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.)
- 언마운트 될 때만 cleanup함수를 실행하고 싶을 때 : 두번 째 파라미터로 빈 배열을 넣는다.
- 특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때 : 의존성배열 안에 검사하고 싶은 값을 넣어준다.
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('cleanup');
};
},[]);componentDidMount
- props로 받은 값을 컴포넌트의 로컬 상태로 설정
- 외부 API 요청 (REST API등)
- setInterval 을 통한 반복작업 혹은 setTimeout을 통한 작업 예약
componentWillUnmount
- setInterval, setTimeout을 사용하여 등록한 작업들 clear할 때 (clearInterval, clearTImeout)
예를들어
모달창을 열었을 때는 뒤에 화면이 스크롤이 되지않다가 모달창을 닫았을 때는 다시 화면이 스크롤이 작동하도록 하기위해서 useEffect를 사용해주었다.
이때 모달을 열렸을때 스크롤을 멈추게하는 부분은 componentDidMount를 , 모달이 닫혔을 때 스크롤이 다시 작동하게하는 건 componentWillUnmount효과가 나타나도록 해주었다.
component가 update될 때
특정값이 업데이트 될 때 실행하고 싶을 때는 의존성 배열 안에 검사하고 싶은 값을 넣어준다.
useEffect(()=> {
console.log(name);
console.log('업데이트 될 때 실행된다');
},[name]);(참고자료: https://react.vlpt.us/basic/16-useEffect.html / https://xiubindev.tistory.com/100 )
