[typescript] JSX에서 컴포넌트의 상태 초기화 방법
JSX에서 컴포넌트를 사용할 때, 상태 초기화는 매우 중요합니다. 이 게시물에서는 JSX에서 컴포넌트의 상태를 초기화하는 방법을 다룹니다.
JSX에서 상태 초기화란?
상태 초기화는 컴포넌트의 초기 상태를 설정하는 것을 의미합니다. JSX에서 컴포넌트를 정의할 때, 상태(initial state)를 지정하여 컴포넌트의 상태를 초기화할 수 있습니다.
방법
Class 컴포넌트에서의 상태 초기화
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
// 초기 상태 값
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
export default MyComponent;
함수형 컴포넌트에서의 상태 초기화
import React, { useState } from 'react';
function MyFunctionalComponent() {
const [count, setCount] = useState(0); // useState를 사용하여 상태 초기화
return (
<div>
<p>Count: {count}</p>
</div>
);
}
export default MyFunctionalComponent;
결론
JSX에서 컴포넌트의 상태를 초기화하는 방법은 class 컴포넌트와 함수형 컴포넌트 각각에 대해 다릅니다. class 컴포넌트에서는 constructor 내에서 this.state를 사용하여 초기화하고, 함수형 컴포넌트에서는 useState를 사용하여 초기화합니다.
상태 초기화를 올바르게 처리하여 JSX 컴포넌트를 효율적으로 관리할 수 있습니다.