useState
//선언
const [user, setUser] = useState({
username: '',
email: ''
});
//사용부
console.log(user);
const {name, value} = e.target;
setUser({
...user,
[name]: value
});useEffect
마운트, 언마운트가 있음
마운트는 새로 홈페이지 화면이 열리거나 값이 바뀔때마다 리렌더링 됨
언마운트는 값이 바뀌거나, 해당 컴포넌트가 사라질 때 호출됨
뒤에 []는 deps로 함수내에서 사용되는 것들을 적어줘야 함(dependencies)
deps의 값이 바뀌면, 리렌더링 전에 unmount가 먼저 실행되고, 그 다음 리렌더링이 되고 mount가 실행됨
useEffect(() => {
console.log('user 값이 설정됨'); // mount
console.log(user); // mount
return () => { // unmount
console.log('user 값이 바뀌기 전');
console.log(user);
};
}, [user]);useMemo
계산된 값이 변경되지 않을 시 재사용하기 위해 사용
function countActiveUsers(users) {
console.log('활성 사용자를 세는 중...');
return users.filter(user => user.active).length;
}
//사용부
const count = useMemo(() => countActiveUsers(users), [users]);
첫번째 매개변수는 호출하는 함수형태로 들어가야 하고, []안에 역시나 사용된 deps를 넣어줌 deps가 바뀌면 값을 새롭게 다시 계산함
