3. 유동적인 데이터를 넣는 state

/* [ state ] : 컴포넌트에서 유동적인 데이터를 보여줄 때 사용됨. : JSX 내부에 {this.state.stateName} : 초기값 설정이 필수, 생성자(constructor)에서 this.state = {}으로 설정 : 값을 수정할 때에는 this.setState({...}), 렌더링 된 다음엔 this.state = 절대 사용하지 말 것! */ class Counter extends React.Component{ // 생성자 constructor(props){ super(props); // 상속받은 부모 생성자를 통해 초기화 this.state = { // 생성자에서 초기값 설정해주는 것(필수임...) value:0 }; this.handleClick = this.handleClick.bind(this); } // 클릭됐을 때 동작할 메서드 정의 // 이 메서드를 클릭할 때 동작하도록 하려면 onClick으로 지정하면 된다. handleClick(){ this.setState({ value:this.state.value + 1 }); } //랜더링 render(){ return( <div> <div>{this.state.value}</div> <!-- 클릭이벤트 메서드를 지정할 때 연결시켜줘야대는대 이때, this를 써줘야함(어떤 this인지 모르는걸 방지하기 위해) : onCLick={this.handleClick.bind(this)} 근대 이 태그에서 직접 바인드하는 것보다 생성자에서 바인딩시켜주는 것이 좋다. 생성자 쪽을 보자. this.handleClick = this.handleClick.bind(this); 를 적용해주고 사용하자 그럼, [this.handleClick() 이렇게하면 어떻게 되나?] : 함수가 실행되긴하지만, 무한반복되며 실행되니까 절때 () 넣지 말자! --> <button onClick={this.handleClick}>Press Me</button> </div> ); } }; class App extends React.Component{ render(){ return( <Counter /> ); } }; ReactDOM.render(<App/>,document.getElementById("root"));

html 쪽에서

<div id="root"></div>