벨로퍼트님의 리액트의 Hooks 완벽 정복하기 내용을 학습하며 정리한 내용입니다.
Hooks는 리액트 v16.8에 새로 도입된 기능으로,
기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
}
============================================
let previosValue = 0;
function setState(callback) {
previosValue = callback(previosValue);
}
setNumber 를 사용 할 때
그 다음 상태를 파라미터로 넣어준것이 아니라,
값을 업데이트 하는 함수를 파라미터로 넣었다.
함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용.
const [value, setValue] = useState(0);
======================================
const array = ['dog', 'cat', 'sheep'];
const [first, second] = array;
console.log(first, second); // dog cat
import React, { useState } from 'react';
const Info = () => {
const [name, setName] = useState('');
const onChangeName = e => {
setName(e.target.value);
};
return (
<>
<input value={name} onChange={onChangeName} />
<div> {name} </div>
</>
);
};
리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정
클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를
합친 형태와 비슷.
설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고,
업데이트 할 경우에는 실행 할 필요가 없는 경우
useEffect(() => {
console.log('마운트 될 때만 실행됩니다.');
}, []);
특정 값이 변경이 될 때만 호출하게 하고 싶을 경우
배열 안에는 useState의 상태나
props로 전달받은 값을 넣어줘도 된다.
1) 함수형
useEffect(() => {
console.log(name);
}, [name]);
2) 클래스형
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
doSomething();
}
}
컴포넌트가 언마운트되기 전이나
업데이트 되기 직전에 어떠한 작업을 수행하고 싶을 경우
useEffect(() => {
console.log('effect');
return () => {
console.log('cleanup');
};
});
컴포넌트가 나타날 때 콘솔에 effect 가 보이고,
사라질 때 cleanup 이 보여지게 된다.
렌더링이 될 때마다 뒷정리 함수가 계속 보여진다.
뒷정리 함수가 호출 될 때에는 업데이트 되기 직전의 값을 보여주고 있다.
만약에, 오직 언마운트 될 때만 뒷정리 함수를 호출하고 싶으면
useEffect 함수의 두번째 파라미터에 비어있는 배열을 넣으면 된다.
함수형 컴포넌트에서 Context를 쉽게 사용할 수 있다.
// ContextSample.js
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('black');
const ContextSample = () => {
const theme = useContext(ThemeContext);
const style = {
background: theme
};
return <div style={style} />;
};
export default ContextSample;
// App.js
import React from 'react';
import ContextSample from './ContextSample';
const App = () => {
return <ContextSample />;
};
export default App;