ReactJS - 생성자: React 컴포넌트의 기초
안녕하세요, React 개발자 지망생 여러분! 오늘 우리는 React의 기본 개념 중 하나인 생성자에 대해 깊이 알아보겠습니다. 생성자는 집의 기초라고 생각해보세요 - 모든 것은 여기서 시작됩니다. 이 수업이 끝나면 프로처럼 React 컴포넌트를 만드는 법을 배우게 될 거예요!
생성자는 무엇인가요?
React 특정 세부 사항에 접근하기 전에, 일반 프로그래밍 용어로 생성자가 무엇인지 이해해보겠습니다.
생성자는 클래스의 특별한 메서드로, 그 클래스의 객체가 생성될 때 자동으로 호출됩니다. 이는 컴포넌트의 탄생과 같아요 - 컴포넌트가 존재하기 시작할 때 발생하는 첫 번째 일입니다.
React에서 생성자는 우리의 컴포넌트의 초기 상태를 설정하고 이벤트 처리기를 바인드하는 곳입니다. 이는 우리의 컴포넌트가 "안녕하세요, 세상!"을 말하는 첫 번째 기회입니다.
간단한 예제를 보겠습니다:
class Welcome extends React.Component {
constructor(props) {
super(props);
console.log("Hello, I'm born!");
}
render() {
return <h1>Welcome to React!</h1>;
}
}이 예제에서, Welcome 컴포넌트가 생성될 때마다 "Hello, I'm born!"을 콘솔에 로그합니다. 이는 컴포넌트의 첫 번째 외침과 같아요!
프로퍼티 초기화
이제 프로퍼티에 대해 이야기해보겠습니다. 프로퍼티(약자 props)는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. 생성자에서는 이 props에 접근하여 컴포넌트를 설정할 수 있습니다.
다음과 같이 합니다:
class Greeter extends React.Component {
constructor(props) {
super(props);
console.log(`I received a name: ${props.name}`);
}
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}이 예제에서 우리는 Greeter 컴포넌트에 전달된 이름 프로퍼티를 로그합니다. super(props) 호출에 주목하세요 - 이는 매우 중요합니다! 이는 부모 클래스(React.Component)의 생성자를 호출하고 props를 전달합니다. 생성자에서 super(props)를 먼저 호출하는 것을 항상 기억하세요.
다음과 같은 용도로 사용할 수 있습니다:
- 받은 props를 디버깅 위해 로그
- props 기반으로 계산 수행
- props를 기반으로 초기 상태 설정 (다음 절에서 다룹니다!)
상태 초기화
상태는 컴포넌트가 변할 수 있는 데이터를 저장하는 곳입니다. 생성자는 이 상태를 초기화하는 완벽한 장소입니다. 어떻게 하는지 보겠습니다:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return <h1>Current count: {this.state.count}</h1>;
}
}여기서 우리는 상태를 count 프로퍼티를 0으로 설정하여 초기화합니다. 이는 this.state를 직접 할당해야 하는 유일한 곳입니다. 다른 모든 곳에서는 this.setState()를 사용하여 상태를 업데이트합니다.
props를 사용하여 상태를 초기화할 수도 있습니다:
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsElapsed: 0,
interval: props.interval || 1000
};
}
// ... 나머지 컴포넌트
}이 예제에서 우리는 props(interval)를 사용하여 상태를 초기화하며, props가 제공되지 않으면 기본값 1000을 사용합니다.
이벤트 바인딩
생성자의 마지막 주요 용도는 이벤트 처리기를 바인드하는 것입니다. JavaScript에서 클래스 메서드는 기본적으로 바인드되지 않습니다. 이를 잊고 이벤트 처리자에 전달하면, 메서드가 호출될 때 this는 undefined가 됩니다.
다음과 같이 메서드를 바인드합니다:
class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}
render() {
return (
<div>
<p>Clicks: {this.state.clicks}</p>
<button onClick={this.handleClick}>Click me!</button>
</div>
);
}
}이 예제에서 우리는 this.handleClick을 생성자에서 바인드합니다. 이렇게 하면 handleClick이 호출될 때 this가 우리의 컴포넌트 인스턴스를 가리키게 되어 this.setState를 호출할 수 있습니다.
모든 것을 통합해보자
이제 모든 개념을 사용하는 컴포넌트를 만들어보겠습니다:
class UserGreeting extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
username: props.username || 'Guest'
};
this.toggleLogin = this.toggleLogin.bind(this);
}
toggleLogin() {
this.setState(prevState => ({
isLoggedIn: !prevState.isLoggedIn
}));
}
render() {
return (
<div>
<h1>Hello, {this.state.username}!</h1>
<p>You are {this.state.isLoggedIn ? 'logged in' : 'not logged in'}.</p>
<button onClick={this.toggleLogin}>
{this.state.isLoggedIn ? 'Log out' : 'Log in'}
</button>
</div>
);
}
}이 컴포넌트는 다음을 수행합니다:
- 프로퍼티(username)를 초기화
- 초기 상태(isLoggedIn과 username)를 설정
- toggleLogin 메서드를 바인드
일반 생성자 메서드
다음은 생성자에서 사용할 수 있는 일반 메서드 표입니다:
| 메서드 | 설명 |
|---|---|
super(props) |
부모 생성자 호출 |
this.state = {...} |
상태 초기화 |
this.methodName = this.methodName.bind(this) |
메서드 바인드 |
console.log(props) |
받은 props 로그 |
this.intervalId = setInterval(...) |
타이머나 인터벌 설정 |
생성자는 컴포넌트의 여정의 시작입니다. 여기서 우리는 모든 것을 기반으로 하여 나머지 것을 짜맞춰갑니다. 지혜롭게 사용하면 컴포넌트가 좋은 시작을 할 수 있습니다!
이 튜토리얼이 React 생성자에 대해 더 잘 이해하는 데 도움이 되길 바랍니다. 계속 연습하고, 곧 당신은 잠에서도 React 컴포넌트를 만들 수 있을 거예요! 행복하게 코딩하세요!
Credits: Image by storyset