2022.06.04 - React / props, state, EventHandling

- props 란?

컴포넌트 외부에서 컴포넌트에게 주는 데이터 

 

- state 란?

컴포넌트 내부에서 변경할 수 있는 데이터 

->둘 다 변경이 발생하면, 랜더가 다시 일어날 수 있다.

 

- Event Handling

HTML DOM에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 한다.

JSX에 이벤트를 설정할 수 있다. 

camelCase 로만 사용할 수 있다. 

이벤트={함수}의 형태로 사용한다. 

실제 DOM 요소들에만 사용이 가능하다. 

   class Component extends React.Component {
        state = {
          //2. state 변경
          count: 0,
        };
        render() {
          //1. 클릭이벤트 랜더링
          return (
            <div>
              <p>{this.state.count}</p>
              <button onClick={this.click}>클릭하세용</button>
            </div>
          );
        }

        click = () => {
          console.log("clicked");
          this.setState((state) => ({
            ...state, // 3.state기능 복사
            // 4. count 객체 리턴 실행
            count: state.count + 2,
          }));
        };
      }

      ReactDOM.render(<Component />, document.querySelector("#root"));