강의 소스
반응 후크를 사용하는 방법
https://www.youtube.com/watch?v=yS-BU6eYUDE
React Hooks 사용 예
https://youtu.be/sZDvByH2mNU
React Hook의 전체 재생 목록
https://www.youtube.com/playlist?list=PL7jH19IHhOLPDyuhF_fLCt_pKvtuLI5qX
후크 반응
http://nomadcoders.co/
www.youtube.com
후크 반응
(장점)
앱을 빌드할 때 React Hooks를 사용하면 클래스 구성 요소, 마운팅, 렌더링 등을 피할 수 있습니다.
코딩은 함수형 프로그래밍 스타일로 수행할 수 있습니다.
그리고 반응 후크 사용 코드 가독성과 유지 관리성을 향상시킬 수 있습니다.
(배경)
반응 후크입니다 재조립하다라는 라이브러리에서 시작되었습니다.
recompose는 기능적 프로그래밍이며 후크와 매우 유사합니다.
Recompose 라이브러리가 Reaction Team에 추가되었습니다.
즉, Recompose와 React의 조합은 후크 반응당신은 말할 수 있습니다
차이점을 보려면 아래 예를 확인하십시오.
class App extends Component {
state = {
count: 0
};
modify = n => {
this.setState({
count: n;
});
};
render() {
const { count } = this.state;
return (
<>
<div>{count}</div>
<button>onClick={() => this.modify(count+1)}>Increment</button>;
</>
);
}
}
위의 코드는 버튼을 클릭할 때 카운트 값을 증가시켜 적용하는 함수를 생성합니다.
코드에서 볼 수 있듯이 클래스 구성 요소, 상태 등이 필요합니다.
정의하거나 전달하는 코드를 작성해야 하기 때문에 쉽지 않습니다.
그러나 React Hooks를 사용하면 위의 코드를 함수형 프로그래밍으로 변환할 수 있을 뿐만 아니라
이것을 사용할 수 없으며 클래스를 떠나 함수에 머무를 수 있습니다.
const App = () => {
const (count, setCount) = useState(0);
return (
<>
{count}
<button onClick{() => setCount(count+1)}>Increment</button>
</>
)
}
React Hooks를 사용하여 코드를 수정했습니다.
코드가 훨씬 더 간결하여 가독성이 향상됩니다.
코드가 변경된 부분을 구체적으로 살펴보겠습니다.
먼저 useState가 두 개 주어집니다.
하나는 값이고 두 번째는 값을 변경하는 방법입니다.
코드를 보면 이 작업은 배열로 처리됩니다.
useState가 배열을 반환하기 때문입니다.
즉, useState는 React 상태 관리를 받고 후크를 당깁니다.
따라서 Component 클래스에서는 사용자가 개별적으로 작업하던 방식에 비해 가독성이 향상되었음을 알 수 있다.
다음 게시물에서는 useState에 대해 자세히 알아봅니다.