오늘은 hook에 대해서 알아보려고 합니다.
이유는... 제가 잘 모르기 때문이져..!!!!!!
그럼 같이 한번 알아법시다
레츄꼬
Hook 닌 몬데..?
Hook
일단 공식문서에 따르면
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다.
라고 합니다. 생명주기는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 근데 요런 메서드들은 클래스형에서 사용하는 것들이죵. 근데 우리는 함수형을 쓴단 말입니다..? 함수형에서도 요런 기능을 사용할 수 있도록 해주는 것이 훅! 입니다.
공식문서에서는 State Hook 과 Effect Hook을 소개하고 있습니다.
State Hook 부터 알아봐Yo
useState
import React, { useState } from 'react';
function Example() {
// "count"라는 새 상태 변수를 선언합니다
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}위 코드는 버튼을 클릭하면 값이 증가하는 간단한 카운터입니다.
useState가 바로 Hook 입니다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지가 됩니다.
이 Hook을 사용하므로써 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꿔야 하는 번거로움이 있었지만 이젠 걱정할 필요가 없다 이말입니다.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}클래스를 사용할 때는 위처럼 this를 이용하여 값을 초기화 해주었습니다. 하지만 함수 컴포넌트에서는 this를 가질 수 없습니다........(뜨헉) 그래서 이때 useState를 사용해주는 겁니다.
import React, { useState } from 'react';
function Example() {
// 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
const [count, setCount] = useState(0);바로 이렇게 말입니다. 음하하
useState 어케 쓰는데여..?
import React, { useState } from 'react';
function Example() {
// 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
const [count, setCount] = useState(0);useState의 인자값
우선 인자값으로는 초기값을 줍니다. 위 코드에서는 0으로 초기화하는 것을 확인할 수 있습니다.
그래서 이 state 값을 어케 가져오냐???
본래 this를 사용할 때는
<p>You clicked {this.state.count} times</p>이렇게 사용해주었어야 합니다.
하지만 우리는 이제 useState를 쓸거기 때문에! 좀 다르져
<p>You clicked {count} times</p>이렇게 고냥 냅다 불러와주면 됩니다악! 넘 편하져?
useState 반환값
state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이게 뭔말이냐 하면은용 저 위의 코드에서 count는 변수 우리가 흔히 생각하는 아는 그런 변수로써 사용하면 됩니다.
근데 this를 사용해서 코드에서 값을 갱신할 때는
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>이런식으로 하는데요
useState는 좀 다릅니당.
<button onClick={() => setCount(count + 1)}>
Click me
</button>이런식으로 작성해주면 됩니다. this를 불러오지 않고 함수를 이용하면 됩니다.
Effect Hook
useEffect가 몬덱..?
useEffect를 사용하면 React는 우리가 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 불러내게 됩니다. 첫번째 렌더링과 이후의 모든 업데이트에서 이 함수를 수행하게 됩니다.
useEffect 사용하는 방!법!
useEffect를 사용할 때 첫번째 인자로는 함수, 두번째 인자로는 의존값이 들어있는 배열을 넣어줍니다. 이 배열은 비울수도 있고 값을 넣어줄 수도 있습니다!
배열을 비운 경우
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, []);요런 경우에는 컴포넌트가 처음 나타날때만 함수가 호출되게 됩니다.
배열에 특정 값을 넣은 경우
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, [특정값]);특정값을 넣어주면 처음 마운트 될 때도 호출이 되고, 지정한 값이 바뀔 때도 호출 됩니다.
배열을 생략한 경우
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
});요 경우에는 컴포넌트가 리렌더링 될 때마다 호출이 됩니다.
Hook의 규칙
최상위(at the Top Level)에서만 Hook을 호출해야 합니다.)
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출해서는 안됩니다.
오직 React 함수 내에서 Hook을 호출해야 합니다.
Hook은 일반적인 javascript 함수에서 호출할 수 없습니다.
사용자 정의 Hook 추출하기
사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수입니다. 사용자 Hook은 다른 Hook을 호출할 수 있습니다.
import { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}위 코드에서 useFriendStatus 가 사용자 정의 Hook입니다.
추가 Hook 함수
위에서 설명한 것들 말고도 많은 hook이 있습니다. 이는 공식문서 를 참조하세용
그럼 오늘도 얼렁뚱땅 끝~
출처
