이번글에서는 React의 class 컴포넌트와 setState를 이용하여 state의 숫자가 1씩 증가하는 함수를 만들어 보자.
(리액트의 상태변화를 중점을 두어서 CSS는 별도로 올리지 않았다.)
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
reportWebVitals();
<React.StrictMode>
create-react-app 을 실행하면 index.js에 strictmode 컴포넌트가 있는데 테스트 모드에서는 쓰이지만 배포모드에서 사용되지 않는다. 테스트를 하는데 필요 없어서 제거했다.
App.js
import React from 'react';
import Main from './components/page/Main';
import './app.css';
class App extends React.Component {
render(){
return (
<div className="App">
<Main />
<div>
)
}
}
export default App;
Card.jsx
import React, { Component } from 'react'
export default class Card extends Component {
constructor(props){
super(props);
this.state = {
count: 0
}
}
componentDidMount(){
console.log('최초에 한번 나왔니?');
}
componentDidUpdate(){
console.log('나 업데이트 됬어');
console.log(this.state.count);
}
incrementCount = () => {
this.setState({ ...this.state, count: this.state.count + 1 });
console.log(this.state.count);
}
render(){
return (
<div className='card'>
<div className='title'>{this.props.title}</div>
<div className='content'>
<p>{this.props.text}</p>
<p>{this.props.children}</p>
<button onClick={this.incrementCount}>카운트 증가</button>
<div>카운트 : {this.state.count}</div>
</div>
</div>
)
}
}
componentDidMount : 최초에 한번만 실행도는 함수
componentDidUpdate : 업데이트 될 때마다 실행할 함수
incrementCount 함수를 button에 onClick으로 할당하여 클릭시 state에 count 상태변수가 1씩 증가하도록 하였다.
클릭을 하면 카운트가 1씩 증가함을 확인할 수 있다.
<setState>
state (상태) 관리는 직접 할당하지 않고 setState 함수를 통해서만 관리를 하는 것을 원칙으로 한다.
- 리액트는 state(상태)가 변경되면 리렌더링을 하기 때문에 state에 값을 할당하지 않는다.
- 상태 값은 마음대로 바꾸면 관리가 어렵다.
- 어디서 상태가 바뀌어야하는지 유추할 수 있어야한다.
Body.jsx
import React, { Component } from 'react';
import Card from './card/Card';
// export default 하나의 요소만 내보내겠다.
export default class Body extends Component {
render(){
return (
<div id='body'>
{this.props.content.map((e) => <Card text={e.id} title={'첫번재 카드'}>나는 자식이야</Card>)}
</div>
)
}
}
this.props.content.map((e) => <Card text={e.id} title={'첫번째 카드'}>나는 자식이야</Card>)
map으로 배열을 순회하며 Card 컴포넌트를 반환하는 함수를 만들어주었다.
Main.jsx
import React, { Component } from 'react';
import Body from '../Body';
export default class Main extends Component {
render(){
retur (
<div>
<Body content={[{ id: 1 }, { id: 2 }, { id: 3 }]} />
</div>
)
}
}
결과
버튼 클릭을 하면 상태가 변하면서 count가 1씩 증가하는 것을 볼 수 있다.
'React' 카테고리의 다른 글
| [React] useState hook에 대해서 알아보자 (0) | 2024.10.03 |
|---|---|
| [React] Link 컴포넌트 (1) | 2024.09.20 |
| [React] CRA (Create React App) 간단히 알아보기 (0) | 2024.08.30 |
| [React] Webpack과 Babel 에 대해서 (JSX 없이 React 구현) (0) | 2024.08.26 |
| [React] React 바닐라 JS로 구현해보기 (0) | 2024.08.26 |