Hooks
react에는 기본적으로 내장하고 있는 Hooks가 있다.
컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵기 때문 (HOC, render props)에 등장한 것이 바로 hooks이다.
- React에 존재하는 component 종류
- Class component
- state, 라이프 사이클 때문에 사용
- 독립적으로 움직일 수 있기에 사용
- 함수 component
- 한번 호출되고 메모리상에서 사라짐(state, 라이프 사이클 불가능)
- 독립적으로 사용 불가능.
- Class component 의 단점
- 버그를 발생시킴
- this.state.foo가 참조하는 값은 항상 최신 => 결과를 보장하기 어려움(버그 발생)
- Class component
"2018년도에 함수 component는 Hooks가 공개되면서, 라이프 사이클을 구현 가능하게 하였다. => 클로저의 등장!"
Hooks 의 사용 규칙
- 규칙 1: 최상위(at the top level)에서만 Hook을 호출. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행할 수 없음.
import React, { useState } from "react" function Hooks(props) { if (!props.isExist) { const [state, setState] = useState(); // Error! } const [state2, setState2] = useState(); // Error! } // react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.- 규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출. 일반 JavaScript 함수에서는 Hook을 호출할 수 없음. (직접 작성한 custom Hook 내에서도 호출 가능)
Hooks은 선택적으로 사용. 기존의 코드를 다시 작성할 필요 없이 일부의 component 안에서 Hooks를 사용할 수 있다. 그러나, Hooks가 필요없다면 사용하지 않아도 된다. Hooks는 React를 대체하지 않는다.
State Hook
- useState : arr 배열을 return
const [state, setState] = useState(initialState);
// 구조분해 할당상태 유지 값과 그 값을 갱신하는 함수를 반환. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 동일하다.
setState 함수는 state를 갱신할 때 사용. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록한다.
setState(newState + 1);
// setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);ex. Class component
// 클래스형 컴포넌트
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times
</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> );
}
}ex. 함수형 component
import React, { useState } from 'react';
// 함수 컴포넌트
function Example() {
// 새로운 state 변수를 선언하고, count라 부르겠습니다.
const [count, setCount] = useState(0);
const [isModalActive, setIsModalActive] = useState(false); // 안 좋은 예시
const [state, setState] = useState({
color: "red",
isActive: true,
name: "jt".
password: "sdaf"
})
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button>
<button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button> </div> );
}Tip.
- 기본 setState와 마찬가지로 비동기 update
- useState 실행 시 state, setState 한 쌍이 부여됨
- 클로저 : 자신이 생성될 시점의 환경을 기억하는 함수
// 아주 간단한 버전의 useState
const useState = (init = undefined) => {
let value = init;
const getter = () => value
// 클로저
const setter = next => (value = next)
// 클로저
return [getter, setter]
}
const [state, setState] = useState('클로저’)
state()
setState("어려워!”)
state()useState() 하나에서 모든 상태 값을 관리하면 안될까요? 네.
함수는 상태를 저장하지 않는다. -> 클로저가 필요한 이유
Effect Hook
- useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것
useEffect
useEffect(function);
useEffect(() => {}, [count])
// 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)클래스형 컴포넌트와 비교한다면 useEffect는 여러가지 라이프 사이클이 합쳐진 형태로 설명할 수 있음.
- componentDidMount (의존성 배열 : [ ])
- shouldComponentUpdate (의존성 배열 내에 해당 사항 없을 경우)
- componentDidUpdate (의존성 배열 자체가 없거나, 해당 사항이 있을 경우)
- componentWillUnmount
- cleanUp이 0인 이유는 클로저(처음 시작할 때의 값을 기억함) 때문이다.
- setInterval( )을 실행할 때 유용하다,
<setInterval( )>
이 함수가 하는 것은 두 인자값(argument)을 받는데, 첫번째 인자로 실행할 function 함수를 받고, 두번째 인자로 그 함수를 실행하고 싶은 시간(실행할 시간)을 받는다.
ex) setInterval(function, 시간);사용예시
useEffect(() => {
const timer = serInterval(function, 1000)
return () => clearInterval(timer)
})Custom useEffect
: 무한 스크롤 (useInfiniteScroll) 예시
