화면은 React로 구현하고, 온라인은 Spring Boot로 셋팅하려고한다. 아래 링크들은 환경셋팅하면서 도움받았던 글이다. 누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 의 형태로 불러와서 사용했던 velopert.com Spring Boot와 React를 연동하여 개발환경을 만들어보자 이번에는 Spring Boot와 React를 연동하여 개발 환경을 만드는 과정을 이야기해보겠습니다. Spring Boot와 React를 연동하는 과정들 Spring Boot로 백엔드를 만들고, 프론트엔드까지 다 만들었을때 ..

브라우저의 타이머 함수인 SetInterval()을 사용해서 상태를 갱신 할 수있다. 예제를 보자. 아래 코드에서 constructor 함수는 Clock Class의 생성자다. constructor 메소드를 먼저 살펴보면 super()를 통해서 부모 클래스의 생성자를 실행한다. 그 다음 Clock Class에서 구현한 launchClock()을 실행하는데 여기서 setInterval() 메소드를 사용한다. 첫번째 인자가 실행할 구문이고 , 두번째 인자가 interval time이다. 여기서는 1000밀리초로 설정했으므로 1초마다 console.log()와 this.setState()를 실행하게 된다. this.setState를 통해서 1초마다 state의 currentTime을 수정한다. class Cl..

가장 기본적이고 제일 익숙한 모습의 if/else문 render(){ let link if (this.props.user.session){ link = Logout else link = Login return {link} } 즉시실행함수를 사용한 방법. link(this.props.user.session) 과 같은 방식으로 sessionFlag 파라미터에 값을 할당한다. render(){ let link = (sessionFlag) => { if (sessionFlag) link = Logout else link = Login } return {link(this.props.user.session)} } link 변수를 사용하지 않고 즉시실행함수를 사용한 방법. 위 코드의 return을 보면 아래와 같이 ..

1. 변수 React에서 아래와 같이 ` (백틱) 과 ${변수명}을 통해서 변수 사용이 가능하다. class DateTimeNow extends React.Component { render() { return React.createElement( 'span', null, `Current date and time is ${dateTimeNow}` } } ReactDOM.render( DateTimeNow, document.getElementById('content') ) JSX방식을 사용하면 중괄호 표기법을 사용하여 변수사용을 좀더 간결하게 할 수있다. let helloWorldReactElement = Hello world! class HelloWorld extends React.Component { r..