React.js 질문입니다
리액트를 새로 공부중입니다
아래부분에서 setinterval로 value값을 바꿔도 하단 return부분에는 영향이 전혀 안가더라구요
return 내부에서 setinerval을 사용하거나 아니면 setinterval외의 다른방법으로 value값을 주기적으로 바꾸게끔 하는 방법이 있을까요
import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { let value = 2; setInterval(() => { if(value===3){ value=0; } value++; console.log(value); }, 1000); return ( <div className="App" > <header className="App-header" style={style}> { (()=> { if (value === 1) return (<div>1</div>); if (value === 2) return (<div>2</div>); if (value === 3) return (<div>3</div>); })() } </header> </div> ); } } export default App;
React 컴포넌트는 state 또는 부모컴포넌트로부터 전달받은 props 가 바뀌면 render() 메서드가 호출됩니다. 님께서 작성하신 코드는 render()메서드 내부에서 작성하신 것으로 아무리 value값이 내부적으로는 바뀐다라더라도 render()메서드가 호출되지 않습니다. 그래서 새롭게 작성해보았습니다. 아래 codesandbox의 코드를 살펴보세요
https://codesandbox.io/s/x7n866px64
react 컴포넌트 기반으로 개발할 때는 jQuery에서 처럼 UI를 중심으로 생각하지 마시고 화면에 나타나는 데이터(Component에서 관리하는 데이터를 상태 state라 부릅니다)를 중심으로 생각해야 합니다. '데이터가 바뀌면 UI가 Rendering 된다'는 컨셉으로 말이죠. 그렇기 때문에 render() 메서드 내부는 간단한 표현식 위주로 작성할 것을 권장합니다. state를 변경하는 작업은 외부에서 이루어지도록 하시고요..
이 코드에서는 state의 value를 setInterval로 주기적으로 변경하기 위해서 componentDidMount 생명주기 메서드를 이용했습니다. Component가 Unmount 될때에 clearInterval을 이용해 주기적인 실행을 중단시킵니다.
추가로 React 공부하실 때 반드시 익히셔야 하는 것들을 말씀드리자면 다음과 같습니다.
state, props의 개념과 기능, 용도에서의 차이
React Component의 생명주기 메서드(Life Cycle Method)
Virtual DOM 개념
Container Component와 Presentational Component의 차이와 용도.. 이것들을 구성하는 형태
상태관리, 라우팅 --> 이 두가지가 SPA 앱 개발에 사실상의 필수적인 구현 요소입니다.
이 밖에도 공부할 것들이 많겠지만 일단 이정도 수준은 되어야 간단한거라도 만들어볼 수 있습니다.
