React 101 - 파트 3: 클래스 컴포넌트

내 Javascript 시리즈 이후:

이제 React 학습 여정을 시작할 준비가 되었습니다 :)

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요. 전날 React 과정에서 배운 내용을 여기 Dev.to에 게시할 예정입니다.

더 이상 고민하지 않고 여기에 3일차 메모를 요약했습니다.

클래스 구성요소

구성 요소는 클래스 구성 요소와 기능 구성 요소의 두 가지 유형으로 제공되며 오늘은 클래스 구성 요소에 집중할 것입니다.

클래스 구성 요소를 만들 때 구성 요소의 이름은 항상 대문자로 시작해야 합니다.

구성 요소는 extends React.Component 문을 포함해야 합니다. 이 문은 React.Component에 대한 상속을 생성하고 구성 요소에 React.Component의 기능에 대한 액세스 권한을 부여합니다.

클래스 구성 요소에는 render() 메서드도 필요하며 이 메서드는 HTML을 반환합니다.

어제 본 것처럼 구성 요소는 소품과 자식도 가질 수 있습니다. 소품은 React 구성 요소에 전달되는 인수이며 HTML 특성을 통해 구성 요소에 전달됩니다.

class Welcome extends React.Component {
  render () {
      return <div>
          <h1>Hello {this.props.name}</h1>
          <p>
              {this.props.children}
          </p>
      </div>
  }
}

function Home () {
  return <div>
      <Welcome name='Mike' />
      <Welcome name='Peter'>Hello my friend</Welcome>
  </div>
}

ReactDOM.render(<Home/>, document.querySelector('#app'))

구성 요소 상태

React 구성 요소에는 상태 객체가 있습니다. 상태 개체는 구성 요소에 속하는 속성 값을 저장하는 곳입니다. 상태 개체가 변경되면 구성 요소가 다시 렌더링됩니다.

예를 들어 Clock 구성 요소를 만들어 보겠습니다.

class Clock extends React.Component {
  render() {
    return <div>
      Date: {Date.toLocaleDateString()} {date.toLocaleTimeString()}
    </div>
  }
}

이 구성 요소는 날짜와 시간을 표시하지만 날짜는 정적이며 전체 브라우저를 새로 고칠 때까지 변경되지 않습니다.

동적 새로 고침을 가능하게 하려면 두 가지를 추가해야 합니다. 먼저 구성 요소에 상태를 추가해야 하고 다음으로 구성 요소를 1초 간격으로 새로 고쳐야 합니다.

먼저 구성 요소에 상태를 추가해 보겠습니다.
구성 요소 생성자 메서드에 상태가 추가됩니다.

constructor() 및 super() 메서드는 부모 구성 요소의 생성자 함수를 실행하는 부모 구성 요소의 상속을 적용하는 곳이기도 합니다. 그런 다음 구성 요소는 부모 구성 요소의 모든 기능에 액세스할 수 있습니다.

React에서 상태는 state라는 객체에 보관됩니다.

class Clock extends React.Component {
  constructor() {
    super(props)
    this.state = {date: new Date}
  }
  render() {
    return <div>
      Date: {this.state.date.toLocaleDateString()} {this.state.date.toLocaleTimeString()}
    </div>
  }
}

구성 요소 수명 주기

다음으로 매 초마다 새로 고침을 추가해 보겠습니다. 그렇게 하려면 구성 요소 수명 주기 메서드를 호출해야 합니다.

React에서 각 구성 요소에는 세 가지 주요 단계 동안 모니터링하고 조작할 수 있는 수명 주기가 있습니다.

세 단계는 마운트, 업데이트 및 마운트 해제입니다.

예를 들어, 마운팅 단계 방법 중 하나는 componentDidMount()입니다. 이 메서드는 구성 요소가 렌더링된 후에 호출됩니다.

이것은 구성 요소가 이미 DOM에 있어야 하는 코드를 넣기에 이상적인 장소입니다.

반대로 컴포넌트가 DOM에서 제거되면 componentWillUnmount() 메서드가 실행됩니다.

수명 주기 및 상태 변경

구성 요소를 매초마다 새로 고치려면 this.date의 상태를 매초 변경하는 타이머를 설정해야 합니다.

React는 자동으로 상태 변경을 감지하고 구성 요소를 새로 고칩니다.

class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {date: new Date}
    this.timer = null
  }

  componentDidMount() {
    this.timer = window.setInterval(() => this.tick(), 1000)
  }

  tick() {
    this.setState({date : new Date})
  }
  componentWillUnmount() {
    window.clearInterval(this.timer)
  }

  render() {
    return <div>
      Date: {this.state.date.toLocaleDateString()} {this.state.date.toLocaleTimeString()}
    </div>
  }
}

다른 클래스 구성 요소 예

이번에는 시작 및 단계 소품이 있는 증분 구성 요소가 있는 두 번째 클래스 구성 요소 예제입니다.

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: Number(this.props.start)} 
    this.timer = null
  }
  tick() {
    this.setState({count: (this.state.count + Number(this.props.step))})
  }
  componentDidMount() {
    this.timer = window.setInterval(() => this.tick(), 1000)
  }
  componentWillUnmount() {
    window.clearInterval(this.timer)
  }
  render () {
    return <div>
      <h1>Welcome to Increment Plus - Made in React</h1>
      <p>This is a increment count web application</p>
      <div>
        <span> Count = {this.state.count} </span>
      </div>
    </div>
  }
}

ReactDOM.render(<Counter start="0" step="1000"/>, document.querySelector('#app'))

결론

오늘은 여기까지입니다. 내일은 이벤트 처리 방법을 배우겠습니다... 아무것도 놓치지 않으려면 저를 팔로우하세요!