앞서 작성한 글처럼 리액트를 사용하면 useState라는 훅을 거의 필수적으로 사용하게 된다.
JS 문법에서 변수를 선언할 때 var, let, const 중에 하나를 앞에 붙일 수 있다.(혹시 몰라서 미리 덧붙이면 var은 되도록 쓰지 않길 권한다. - 이것도 정리 예정)
아무튼 useState 대신 let을 이용해서 변수 관리를 해도 되지 않을까?라는 생각이 종종 든다.
그래서 한번 let을 이용해 카운트를 만들어봤다.
import './App.css';
function App() {
let value = 0;
function inc() {
value += 1;
console.log('현재 값은 : ' + value);
}
function dec() {
value -= 1;
console.log('현재 값은 : ' + value);
}
return (
<div className="App">
<p>
현재 카운터 값은 <b>{value}</b> 입니다.
</p>
<button onClick={inc}>1 증가</button>
<button onClick={dec}>1 감소</button>
</div>
);
}
export default App;빈 폴더에 리액트 환경을 구축하고 App.js를 이 코드처럼 변경하면 현재 값과 버튼 클릭을 할 수 있는 화면이 나온다.
실제 결과를 확인할 때 개발자 도구의 콘솔창을 같이 확인하기 바란다.
결과를 확인하면 value의 값은 변경, 화면의 숫자는 변경되지 않는다.
이렇게 되는 이유는 useState는 상태값이 변경 후 화면이 렌더링되어 변경된 값이 출력되지만 let은 변경 후 따로 화면이 렌더링되지 않기 때문에 화면에 표시된 값은 그대로 보이게된다.
(렌더링에 관한 정리는 다음 글로 정리해보겠다)
어떻게든 useState 안 쓰고 만들어보기
훅 없이 상태값 관리가 가능하다.
src 폴더에 code 폴더에 생성한 Counter.js 코드
import React, {Component} from 'react';
class Counter extends Component {
//생성자
constructor(props) {
super(props);
//초깃값 설정, 현재 start 조회는 this.state로 접근
this.state = {
count: 0,
};
}
render() {
let {count} = this.state;
return (
<div>
//숫자 표시
<h1>{count}</h1>
//+1버튼과 그 이벤트 설정
<button onClick={() => {
//setState를 통해서 state(여기서는 count)값 변경
this.setState({count: count + 1});
}}>
+
</button>
</div>
);
}
}
export default Counter;그리고 App.js 코드
import React from 'react';
import Counter from './code/Counter';
const App = () => {
return (
<Counter />
);
};
export default App;보면 클래스형 컴포넌트로 코드가 작성되어 있다.
클래스를 이용한 코드에 대해서는 아는 것이 없어 다른 분의 코드를 복사했다.
state - 클래스형 컴포넌트
참고로 let을 const로 변경해서 해도 동작한다.
즉, 클래스형 컴포넌트를 사용해야 리액트 훅 없이 상태값 관리가 가능하다.
클래스형 vs 함수형
위 결과로 봤을 때 훅을 사용하지 않는다면 클래스형태로 코드를 작성해야 한다는 말이된다.
클래스형과 함수형은 다음과 같은 차이점이 존재한다.
- 클래스형은 상태값과 Life Cycle 함수를 가질 수 있다.
- 함수형은 위 두 가지를 가질 수 없다. 다만, 훅의 등장으로 가질 수 있게 되었다.
쉽게 말하면 16.8버전 이전에는 클래스형에서만 가능하던 상태값 관리가 이후 버전에서는 훅의 등장으로 함수형 컴포넌트에서도 가능해졌다.
Life Cycle 함수
컴포넌트가 브라우저에 생성, 업데이트, 소멸될 때 호출되는 함수이다.
이 과정을 마운트 - 업데이트 - 언마운트 단계라고 부르는데 더 깊숙한 지식은 출처로 대신하고 추후 지식이 완전히 정리됐을 때 다음 글로 정리하겠다.
클래스형 컴포넌트와 함수형 컴포넌트
결론
- 리액트는 16.8버전 이후로 훅의 등장으로 함수형 컴포넌트에서 상태값 관리 및 변경이 가능하다.
- 따라서, 훅을 사용하지 않고 상태값 관리를 원한다면 클래스형으로 작성해야 한다.
- 상태값 관리 과정은 Life Cycle 함수의 호출로 관리되며 크게 생성, 업데이트, 소멸되는 단계로 나뉜다. 이를 마운트, 업데이트, 언마운트라 부른다.
그외 참고한 출처들
우리가 리액트에서 Hooks를 사용하는 이유
React-Hooks
