함수형 컴포넌트의 과거와 현재
함수형 컴포넌트는 함수를 기반으로 컴포넌트를 생성할 수 있는 문법이다.
과거에는 함수형 컴포넌트는 라이프 사이클과, state를 사용할 수 없다는 단점이 있었다.
이런 단점으로 인해 함수형 컴포넌트는 라이프사이클과, state를 사용하지 않는 간단한 컴포넌트를 만드는데 주로 사용되었으나,
16.8버전 부터 Hook이라는 개념이 도입된 후 클래스 컴포넌트와 동일하게 사용할 수 있게 됐다.
함수형 컴포넌트에서 state 어떻게 써요? -> useState Hook
useState를 호출할때 초기값을 먼저 파라미터로 전달한다.
그리고 useState호출하면 배열을 반환하는데, 첫번째 반환값은 state값을, 두번째 반환값은 state를 변경할 수 있는 함수를 반환한다.
const countState = useState(/*초기값*/)
인덱스 | 설명 |
countState[0] | state의 값을 반환한다. |
countState[1] | state값을 변경할 수 있는 함수를 반환한다. 호출시 state가 업데이트 되므로 관련된 라이프 사이클이 일어난다. |
예시는 아래와 같다.
import React, { useState } from 'react';
function Example() {
const countState = useState(0);
// const [count, setCount] = useState(0); 이렇게 표현할 수도 있다.
return (
<div>
<p>You clicked {countState[0]} times</p>
<button onClick={() => countState[1](countState[0] + 1)}>
Click me
</button>
</div>
);
}
함수형 컴포넌트에서 라이프사이클 어떻게 써요? -> useEffect Hook
useEffect Hook을 사용하면 클래스 컴포넌트의 componentDidmount, conponentDidUpdate, componentWillUnmount까지 한번에 해결할 수 있다!
useEffect(() => {
/* componentDidmount, componentDidUpdate시마다 실행할 함수*/
})
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
클릭하면 state가 변경되고 state가 변경될때마다,
useEffect에 인자로 전달된 함수가 실행되어 타이틀이 변경되는것을 확인할 수 있다.
각각의 라이프사이클을 구분해서 사용하려면 사용방법은 아래와 같다.
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
useEffect(() => {
console.log('count가 이전과 다르게 변경될 때만 실행될 함수');
console.log('우린 그걸 componentDidUpdate라고 부르기로 했어요');
}, [count]);
useEffect(() => {
console.log('최초 mount시에만 실행될 함수');
console.log('우린 그걸 componentDidMount라고 부르기로 했어요');
}, []);
}
그런데, 최초 마운트시에 componentDidUpdate가 실행된다 :/ 이건 왜그런지 연구를 좀 해봐야 겠다.
'Today I learned' 카테고리의 다른 글
2022 04 20 - RabbitMQ (0) | 2022.04.20 |
---|---|
2022 03 20 하이오더 컴포넌트 예제 (0) | 2022.03.20 |
2022 03 20 - 단축평가 (0) | 2022.03.20 |
2022 03 19 - Promise 체이닝과 / async await (0) | 2022.03.19 |
2021 11 20 혼돈의 Optional 훈련 (0) | 2021.11.20 |
댓글