[React] Hooks (리액트 훅이란?) 정리

회사에서 약 한달 간 리액트 스터디 겸 앱/웹 프로젝트를 만들기로 하였다. (Angular를 사용하고 있는 우리...)
그래서! 앵귤러에서 라이프사이클을 사용하는 것처럼 react에서 사용하는 훅들을 정리해보려고 한다.
 
 

기본 Hook

useState

const [state, setState] = useState(initialState);

상태 관리를 위한 훅으로 상태 유지 값과 그 값을 갱신하는 함수를 반환한다.
setState함수는 state를 갱신할 때 사용하는 함수
 

useEffect

useEffect(function, deps);

라이프 사이클 관련 작업을 처리하는 훅. 
컴포넌트가 렌더링 될 때마다 함수를 실행한다.
컴포넌트가 마운트되었을 때, 업데이트되었을 때, 언마운트되었을 때 등의 상황에서 원하는 동작을 실행할 수 있다.
 
1. 마운트되었을 때 (처음 나타났을 때) : deps에 빈 배열 넣기

useEffect(() => {
	console.log('처음 등장');
}, []);

 
2. 업데이트될 때 (props, state가 바뀔 때) : deps에 검사하고 싶은 값을 담은 배열 넣기

useEffect(() => {
	console.log('업데이트');
}, [email]);

 
3. 언마운트될 때(사라질 때) : cleanup 함수 반환

useEffect(() => {
	return () =>{
    	console.log('사라짐')'
    };
}, []);

 

useContext

const value = useContext(SomeContext)

 
상위 컴포넌트에서 전달한 context 값을 하위 컴포넌트에서 간단하게 사용할 수 있다.
전역에서 데이터를 공유하고 싶을 때 사용하면 간단하게 처리할 수 있다.