리액트의 상태저장 컴포넌트와 상태비저장 컴포넌트
1. 컴포넌트 상태
- react 에서 상태는 컴포넌트의 변경 가능한 데이터 저장소다.
- 속성과 상태는 뷰를 갱신하기 위하여 사용하지만 서로다른 목적을 가지고 있다.
- 상태는 동적으로 뷰를 렌더링 할 때 사용한다
2. 속성(props) vs 상태(state)
1) 접근 방법
- 속성 : this.props.NAME
- 상태 : this.state.NAME
2) 전달 방법
- 속성: 부모에서 자식 컴포넌트로 전달해야만 render()에서 사용 가능하다
- 상태: 현재 컴포넌트에서 변경하여 render() 에 전달 가능하다
3. 상태저장 컴포넌트
1) 초기 상태 설정
- render() 에서 상태 데이터를 사용하려면 상태를 초기화 해야한다.
- construtor()를 사용한다.
class Clock extends React.Component{ constructor(props){ super(props) this.state = {currentTime: (new Date()).toLocaleDateString('en')} } render(){ return <div>{this.state,currentTime}</div> }}ReactDOM.render( <Clock/>, document.getElementById('app'));
- super()를 통하여 반드시 전달해야 부모(React.Component)에서 기능 할 수 있다.
2) 상태 갱신 하기
- this.setState(data, callback) 을 이용하여 상태를 갱신 할 수 있다.
- setState()는 비동기로 작동한다. 또한 render() 를 호출 한다.
class Clock extends React.Component{ constructor(props){ super(props) this.launchClock() this.state = {currentTime: (new Date()).toLocaleDateString('en')} } launchClock(){ setInterval(()=>{ console.log('Update time') this.setState({ currentTime:(new Date()).toLocaleString('en') }) },1000) } render(){ return <div> {this.state.currentTime} </div> }}ReactDOM.render( <Clock/>, document.getElementById('app'));
- setInterval() 함수를 이용하여 1초마다 상태를 갱신하여 화면에 출력한다. 화면을 보면 초가 바뀌는걸 알 수 있다.
4. 상태비 저장 컴포넌트
- 상태 객체가 없는 일반 컴포넌트를 의미 한다.
class HelloWorld extends React.Component{ render(){ return( <div><h1>1. HelloWorld</h1></div> ) }}
1) 상태비 저장 컴포넌트 정의
- react 컴포넌트를 상속하는 방법이 있지만 function() 으로 선언하는 것을 추천한다
//1번const HelloWorld = function(props){ return <h1 {...props}>Hello {props.frameworkd}</h1>}//2번const HelloWorld = (props) => {return <h1 {...props}>Hello {props.frameworkd}</h1>}//3번const HelloWorld = props => <h1 {...props}>Hello {props.frameworkd}</h1>
5. 상태 저장 vs 상태 비저장 컴포넌트
- 상태 저장은 적을 수록, 상태 비저장 컴포넌트는 많이 사용할 수록 좋다
- 상태 비저장 컴포넌트를 사용함으로 간결하고 유지보수 쉬운 개발을 할 수 있다.
1) 상태 비저장 컴포넌트에 속성전달
const DigitalDisplay = props => <div>{props.time}</div>const AnalogDisplay = function(props) { let date = new Date(props.time) let dialStyle = { position: 'relative', top: 0, left: 0, width: 200, height: 200, borderRadius: 20000, borderStyle: 'solid', borderColor: 'black' } let secondHandStyle = { position: 'relative', top: 100, left: 100, border: '1px solid red', width: '40%', height: 1, transform: 'rotate(' + ((date.getSeconds()/60)*360 - 90 ).toString() + 'deg)', transformOrigin: '0% 0%', backgroundColor: 'red' } let minuteHandStyle = { position: 'relative', top: 100, left: 100, border: '1px solid grey', width: '40%', height: 3, transform: 'rotate(' + ((date.getMinutes()/60)*360 - 90 ).toString() + 'deg)', transformOrigin: '0% 0%', backgroundColor: 'grey' } let hourHandStyle = { position: 'relative', top: 92, left: 106, border: '1px solid grey', width: '20%', height: 7, transform: 'rotate(' + ((date.getHours()/12)*360 - 90 ).toString() + 'deg)', transformOrigin: '0% 0%', backgroundColor: 'grey' } return <div> <div style={dialStyle}> <div style={secondHandStyle}/> <div style={minuteHandStyle}/> <div style={hourHandStyle}/> </div> </div>}class Clock extends React.Component{ constructor(props){ super(props) this.launchClock() this.state = {currentTime: (new Date()).toLocaleDateString('en')} } launchClock(){ setInterval(()=>{ console.log('Update time') this.setState({ currentTime:(new Date()).toLocaleString('en') }) },1000) } render(){ return <div> <DigitalDisplay time={this.state.currentTime}/> <AnalogDisplay time={this.state.currentTime}/> </div> }}ReactDOM.render( <Clock/>, document.getElementById('app'));
- 상태 비저장 컴포넌트에 속성값을 받아 적절한 상태 컴포넌트를 구현 할 수 있다.
'Front-End > ReactJs' 카테고리의 다른 글
| [ReactJs] 리엑트 폼 요소 정의 (0) | 2018.08.07 |
|---|---|
| [ReactJs] 리액트 폼 이벤트 설정 (0) | 2018.08.05 |
| [ReactJs] 리액트 이벤트와 컴포넌트 데이터 교환 (0) | 2018.08.05 |
| [ReactJs] 리액트 컴포넌트 라이프사이클 (0) | 2018.08.05 |
| [ReactJs] webpack + babel + reactjs 환경셋팅하기 (0) | 2018.07.29 |
리딩리드