[ReactJs] 리액트 상태저장 컴포넌트와 상태비저장 컴포넌트

리액트의 상태저장 컴포넌트와 상태비저장 컴포넌트

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') );  

- 상태 비저장 컴포넌트에 속성값을 받아 적절한 상태 컴포넌트를 구현 할 수 있다.