리액트 hook?
hook이란 단어가 잘 와닫지 않는다.
한만디로 표현한다면 hook이란 뭘까?
hook
- (갈)고리, 걸이; (낚시) 바늘
- 갈고리[호크]로 잠그다[걸다], 갈고리[호크]로 잠그게[걸게] 되어 있다
리액트에서 hook 사용
- 컴포넌트에게 훅을 건다
- 컴포넌트 생명 주기에 특정 명령을 내린다
지금까지 이해한 리액트 hook은 함수형 컴포넌트에서 사용되는 기술을 훅이라 부르며 상태관리와, 컴포넌트 생명주기 기능을 연동할 수 있게 해주는 함수이다.
생명주기?
컴포넌트의 수명 페이지에서 렌더링되기 전 준비과정에서 시작 -> 페이지에서 사라질때 끝난다.
mount?
컴포넌트가 처음 실행 될 때, DOM이 생성되고 웹 브라우저상에 나타는것을 뜻한다.
어떤일이 일어날까?
1.state, context, defaultProps 저장
2.componentWillMount
3.render
4.componentDidMount
업데이트 ?
props, state 변경이 일어날 때, 부모 컴포넌트 렌더링, forceUpdate() 를 실행
unmount?
컴포넌트 제거, DOM에서 제거
기본 내장 API 함수
useEffect
- useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook
- 처음 마운트될 때 실행, 새로운 props가 전달,상태(state)가 바뀔때
- 예를 들면 api요청으로 외부 요소를 가져올 때 side Effect발생
- 이를 컨트롤하기 위해 useEffect를 사용
useEffect(()=>{},[])
첫번째 인자는 함수, 두번째 인자는 배열이며 이 배열은 조건을 담고 있다. 여기서 조건은 어떤 값의 변경이 일어날 때를 의미한다.
빈 배열일 경우 처음 한번만 실행된다.
- Side Effect란? 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위
useState
- 값이 변경 될 때마다 실행
const [count, setCount] = useState(0);
useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다.
useCallback
- 함수를 메모이제이션하기 위해 사용되는 hook함수
- 간단히 말하자면 함수 재사용
const memoizedCallback = useCallback(함수, 배열);
- 리액트 컴포넌트 안에 선언된 함수는 랜더링될 때 마다 새로운 함수로 생성된다.
->문제점 하위 컴포넌트는 함수가 달라졌다고 인식하여 리렌더가 발생된다.
- useCallback을 사용하면, 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.
- 두번째 인자의 배열은 의존성을 의미한다.
- 언제사용할까?
- 자식 컴포넌트에 함수를 props로 넘겨주는데 , 해당 자식 컴포넌트에 넘겨주는 함수 때문에 불필요한 리렌더링이 일어난다고 판단될 경우
- 기존 함수를 계속 반환한다면 불필요한 리렌더가 일어나지 않을것이다. (방지)
memoizaion? 이전 계산값을 메모리에 저장