react v16.8 부터 추가사항으로 새로운 개념과 실용적인 접근이 가능한 것인데, class없이 componet에서 state와 lifecycle 메소드를 사용할 수 있도록 도와주는 것이다. 이러한 특징은 react 생태계에서 모두 이익이 되게 한다.
프론트 엔드 개발자로 모바일 앱을 react-native를 쓰든 말든 간에, 작업 환경에서 hooks는 자주 등장한다. 물론, 쓰지 않아도 상관없다.
react-native 커뮤니티에서 v0.59에서 hooks의 기능이 추가된다는 것을 보았다. 이번 글을 통해서 hooks과 좀 더 친해지고 hooks을 react-native에 적용하는 것을 해볼 것이다.가장 놀라웠던 것은 코드의 길이가 확실히 줄어 들었다는 것이다. 여러분들도 그것을 맛볼 수 있을 것이다.
Hooks
hooks을 사용하기 전에는 JSX(JavaScript and XML) class가 필요했다. hooks을 사용함으로써, function components를 가져온다. hooks은 useState와 useEffect라는 함수를 제공한다. 또한 나만의 hooks를 만들어 사용이 가능하다.
component lifecycle
react를 사용할 때는 component를 class 또는 함수로 정의할 수 있습니다. 모든 component는 여러 종류의 lifecycle methods를 가지며 오버라이딩하여 특정 시점에 코드가 실행되도록 합니다. 위의 그림은 lifecycle 도표입니다.
마운트(생성될 때)
해당 메서드는 componennt의 인스턴스가 생성되어 DOM 상에 삽입될 때 순서대로 호출됩니다.
- construtor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
업데이트
props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출됩니다.
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
마운트 해체(제거할 때)
아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출됩니다.
- componentWillUnmount()
오류 처리
아래 메서드들은 자식 컴포넌트를 렌더링하거나, 자식 컴포넌트가 생명주기 메서드를 호출하거나, 또는 자식 컴포넌트가 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때에 호출됩니다.
인스턴스 프로퍼티
props
this.props는 해당 컴포넌트가 호출된 곳에서 정의한 props를 포함하고 있습니다. 특히, this.props.children은 특별한 prop으로, 일반적인 태그가 아닌 JSX 표현으로 작성된 자식 태그로 정의되는 경우가 많습니다.
state
state는 어떤 컴포넌트에만 한정하여 사용되는 데이터를 포함하며, 해당 데이터는 시간이 지남에 따라 변경될 수 있습니다. state는 사용자가 자유롭게 정의할 수 있으며, 일반적인 자바스크립트 객체이어야 합니다.
hooks는 component lifecycle의 어디에 적합한가?
useEffect은 가장 중요하는데, render 호출 후 실행되는 함수를 사용할 수 있다. componentDidUpdate와 동일하다. 만일 useEffect에서 전달 받으면 componentDidUpdate로 작성이 가능하다. useEffect는 render후에 실행되므로 []를 두 번째 인수로 전달하여 componentDidMount 및 componentWillUnmount에 근접하도록 제한할 수 있다. 이것은 state가 변경되었을 때만 호출되어야 한다는 것을 알려준다.
conculsion
react hooks은 좀 더 clean한 component를 사용할 수 있고, 코드가 더욱 간결해진다. lifecycle 해당 메소드와 react에 대해서 다음 글에 다뤄보도록 하겠다.
