ReactJS - React Without ES6 ECMAScript
안녕하세요, 야심찬 프로그래머 여러분! 오늘 우리는 흥미로운 여정을 떠납니다. ReactJS의 세계로, 하지만 이번에는 ES6 없이 말이죠. ES6이 무엇인지 아직 모르시겠다면 걱정 마세요; 우리는가면서 설명해 나갈 테니. 마치 React의 초기 시절로 돌아가는 시간 기계를 만들고 있는 것을 상상해 보세요. 준비되셨나요? 시작해 보겠습니다!
React는 무엇이며 왜 "구식" 방법을 배우는가?
React는 사용자 인터페이스를 만들기 위한 인기 있는 JavaScript 라이브러리입니다. 웹 개발자에게는 LEGO와 같은 존재 - 작은, 재사용 가능한 조각(컴포넌트)을 만들어 복잡한 애플리케이션을 구축합니다.
이제 여러분은 "왜 ES6 없이 React를 배우는가?"라는 의문이 생길 수도 있습니다. 제 사랑하는 학생들, 이는 수동 차를 몰다가 자동 차를 몰기 전과 같은 이치입니다. 이를 통해 더 깊은 이해를 얻을 수 있습니다. 또한, 이 문법을 사용하는 오래된 코드베이스를 마주할 수도 있으므로, 이를 알아 두는 것은 좋습니다.
Create React Class (create-react-class)
ES6 이전의 React 세계에서 우리는 createReactClass를 사용하여 컴포넌트를 만들었습니다. 간단한 예를 보겠습니다:
var React = require('react');
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});이를 하나씩 설명해 보겠습니다:
- 우리는 React와
create-react-class패키지를 가져옵니다. -
createReactClass를 사용하여Greeting이라는 컴포넌트를 만듭니다. - 컴포넌트 내부에서
render함수를 정의하여 JSX를 반환합니다.
ES6을 사용하면 동일한 컴포넌트는 다음과 같이 보입니다:
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}이 차이를 보시죠? createReactClass 방식은 좀 더 길어 보이지만, 독특한 기능들이 있습니다. 이제 그 기능을 탐구해 보겠습니다.
Props의 기본값 설정 (getDefaultProps)
React에서는 자주 props의 기본값을 설정하고 싶습니다. createReactClass에서는 getDefaultProps라는 특별한 메서드를 사용합니다. 이렇게 작동합니다:
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});이 예제에서:
- 우리는
getDefaultProps함수를 정의하여 객체를 반환합니다. - 이 객체는 props의 기본값을 포함합니다.
- 이 컴포넌트를 사용할 때
nameprops가 제공되지 않으면, 기본적으로 'World'로 설정됩니다.
따라서 <Greeting />을 사용하면 "Hello, World!"를 렌더링하고, <Greeting name="Alice" />을 사용하면 "Hello, Alice!"를 렌더링합니다.
ES6 React에서는 동일한 것을 static 프로퍼티를 사용하여 달성할 수 있습니다:
class Greeting extends React.Component {
static defaultProps = {
name: 'World'
};
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}초기 상태 설정 (getInitialState)
상태는 컴포넌트의 개인 데이터 저장소입니다. createReactClass에서는 getInitialState를 사용하여 초기 상태를 설정합니다:
var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
});이를 하나씩 설명해 보겠습니다:
-
getInitialState는 초기 상태를 정의하는 객체를 반환합니다. - 우리는 초기
count를 0으로 설정합니다. -
incrementCount함수는 상태를 업데이트합니다. -
render메서드에서는 count와 increment 버튼을 표시합니다.
ES6 React에서는 초기 상태를 생성자에서 설정합니다:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... 나머지 컴포넌트
}메서드 비교
다음은 우리가 논의한 메서드 비교 표입니다:
| createReactClass | ES6 Class | 목적 |
|---|---|---|
| getDefaultProps | static defaultProps | 기본 prop 값 설정 |
| getInitialState | constructor | 초기 상태 설정 |
| render | render | 컴포넌트 렌더링 |
결론
그렇게 우리는 ES6 없이 React를 탐구하는 시간 여행을 마쳤습니다. 이 개념을 이해하면 더 완전한 React 개발자가 될 수 있습니다. 언어의 역사를 알아보는 것처럼, 이를 통해 현대 기능에 대한 깊은 감사를 표할 수 있습니다.
마무리하면서, 나는 이야기가 떠오릅니다. 언제 그랬는지, 오래된 프로젝트에서 이러한 구식 문법을 사용하고 있었을 때, 팀원들이 당惑되었지만, 이 기본 개념을 이해한 덕분에 나는 React 슈퍼 헴로서 나타나 구원을 했습니다!
계속 연습하고, 호기심을 유지하면, 언제 그랬는지 모르겠지만, React로 놀라운 것을 만들 것입니다 - 오래된 문법이든 새로운 문법이든 상관없습니다. 행복하게 코딩하고, 컴포넌트가 항상 완벽하게 렌더링되기를 바랍니다!
Credits: Image by storyset