상태 속기로 React 컴포넌트 최적화하기
React에서 컴포넌트의 상태는 컴포넌트의 내부 상태를 유지하는 데 핵심적인 역할을 합니다. 컴포넌트 상태를 더 쉽게 정의하고 업데이트할 수 있도록 React는 "클래스 프로퍼티"라는 새로운 클래스 프로퍼티 구문을 지원합니다. 이 구문을 사용하면 컴포넌트의 상태를 클래스 정의에서 직접 초기화할 수 있으므로 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.
클래스 속성 구문 소개
React 클래스 컴포넌트에서 컴포넌트의 상태는 일반적으로 생성자에서 초기화되지만, 클래스 속성 구문을 사용하면 생성자를 명시적으로 선언할 필요 없이 클래스 본문에서 직접 클래스의 상태를 정의할 수 있습니다. 이렇게 하면 컴포넌트 정의가 더 간결해지고 코드 가독성이 향상됩니다.
샘플 코드 설명
다음은 클래스 프로퍼티 구문으로 최적화된 React 클래스 컴포넌트의 예시입니다:
<html>
<head>
<title>State </title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="../../js/react.development.js"></script>
<script type="text/javascript" src="../../js/react-dom.development.js"></script>
<script type="text/javascript" src="../../js/babel.min.js"></script>
<script type="text/babel">
class Hello extends React.Component {
// 클래스 프로퍼티 구문을 사용하여 상태 초기화하기
state = { isJudith: true }
// 화살표 함수로 클래스 메서드를 정의하여 this가 올바르게 바인딩되도록 하기
changeName = () => {
const { isJudith } = this.state;
this.setState({ isJudith: !isJudith });
}
render() {
const { isJudith } = this.state;
return <h2 onClick={this.changeName}> : {isJudith ? 'Judith' : 'tanaka San'}</h2>;
}
}
// 컴포넌트를 루트 엘리먼트에 렌더링하기
ReactDOM.render(<Hello />, document.getElementById('root'));
</script>
</body>
</html>
장점 및 요약
- 가독성 향상: 클래스 속성 구문은 컴포넌트 정의를 더욱 간결하게 만들고, 중복 생성자를 줄이며, 코드를 더욱 가독성 있게 만듭니다.
- 코드 감소: 생성자를 생략하면 일부 샘플 코드가 줄어들어 컴포넌트 정의가 더욱 간소화됩니다.
- 화살표 함수 사용: 클래스 속성 구문은 종종 화살표 함수와 함께 사용되어 this가 클래스 메서드 내에서 올바른 위치를 가리키도록 합니다.
전반적으로 클래스 프로퍼티 구문을 사용하면 React 코드의 품질과 유지보수성을 쉽게 개선할 수 있습니다. 더 명확하고 간결한 코드를 사용하면 컴포넌트의 비즈니스 로직에 더 집중할 수 있습니다.
