오늘 배운 것

React Main Concept 2/3

React is a JavaScript library for building user interfaces.

앞으로 3개의 포스팅에 걸쳐 React의 주요 개념에 대해 공식문서를 기반으로 정리해보고자 한다.

4. State & Lifecycle

• State는 Class Component에서만 사용할 수 있으며, 변화하는 값으로 지정한다.
• 변화하지 않는 값은 단순히 Props를 이용해 하위 컴포넌트로 내려보내주면 된다.
• 이렇게 State로 설정해 주어야 할 값과 단순히 Props로 전달해 주는 값을 구분하는 이유는 React의 LifeCycle Method와 관련이 있다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
//클래스 컴포넌트로 만들어주었고, state 값으로 현재의 시간을 주었다.
    
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
//이후 이 클래스 컴포넌트가 호출되어 render 메소드가 실행되면 
//state에 저장되어 있는 값을 렌더링할 것이다.
//값은 더 이상 변하지 않을 것이다.
//이럴 경우 굳이 state값을 줄 필요도 없고, 
//변수 선언 없이 단순히 {new Date().toLocaleTimeString()}로 값을 주어도 무방하다.

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

//앞서 설명했듯 state는 변화하는 값을 설정하는 것이 유리하고,
//다음에서 state를 활용하는 좋은 예제를 소개한다.

• 다음 예제로 넘어가기 전에 LifeCycle Method의 진행과정을 그림으로 훝어보고 오자.
• 간단히 설명하자면 React 컴포넌트는 생성 -> 업데이트 -> 제거의 과정에서 특정 LifeCycle Meothod를 실행 시킨다.
• 이를 이용해 앱을 동적으로 관리할 수 있게 된다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
//클래스 컴포넌트로 만들어주고, state 값을 준 것까지는 동일하다.
    
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
//컴포넌트가 생성되고나서 실행되는 메소드
    
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
//컴포넌트가 제거되고나서 실행되는 메소드

  tick() {
    this.setState({
      date: new Date()
    });
  }
//componentDidMount의 콜백함수이자,state 값을 변화시켜주는 메소드
    
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

//이제 시계는 1초마다 업데이트 될 것이다.
//이렇듯 LifeCycle Method와 State를 이용해 
//이제 동적으로 동작하는 앱을 만들 수 있다.

• 현재 어떤 상황이고 메서드가 어떻게 호출되는지 순서대로 빠르게 요약하면 다음과 같다.
  1. <Clock />가 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출합니다. Clock이 현재 시각을 표시해야 하기 때문에 현재 시각이 포함된 객체로 this.state를 초기화합니다. 나중에 이 state를 업데이트할 것입니다.
  2. React는 Clock 컴포넌트의 render() 메서드를 호출합니다. 이를 통해 React는 화면에 표시되어야 할 내용을 알게 됩니다. 그 다음 React는 Clock의 렌더링 출력값을 일치시키기 위해 DOM을 업데이트합니다.
  3. Clock 출력값이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출합니다. 그 안에서 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저에 요청합니다.
  4. 매초 브라우저가 tick() 메서드를 호출합니다. 그 안에서 Clock 컴포넌트는 setState()에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트를 진행합니다. setState() 호출 덕분에 React는 state가 변경된 것을 인지하고 화면에 표시될 내용을 알아내기 위해 render() 메서드를 다시 호출합니다. 이 때 render() 메서드 안의 this.state.date가 달라지고 렌더링 출력값은 업데이트된 시각을 포함합니다. React는 이에 따라 DOM을 업데이트합니다.
  5. Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 있다면 React는 타이머를 멈추기 위해 componentWillUnmount() 생명주기 메서드를 호출합니다.

5. Event Handling

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다.

몇 가지 문법 차이는 다음과 같습니다.

• React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

• HTML과 React에서의 차이를 예제를 통해 확인해보자

//HTML
<button onclick="helloWorld()">
  hellow World
</button>

//React
<button onClick={helloWorld}>
  hellow World
</button>

• React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 된다.

//다음은 버튼을 누르면 엘리먼트의 텍스트를 바꾸어주는
//이벤트가 발생하는 클래스 컴포넌트이다.
class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 한다.
    this.handleClick = this.handleClick.bind(this);
  }
    
//버튼을 클릭하면 state의 값을 바꾸어주는 메소드
  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

//이벤트 이름은 camelCase로 작성    
//addEventListener 없이 단순히 함수를 할당해주면 된다.
//JSX안에서 인라인으로 처리하기 위해서는 삼항연산자 사용해야한다.(if문은 바깥에서)
  render() {
    return (
      <button onClick={this.handleClick}>
        Hello{this.state.isToggleOn ? ', World' : ''}
      </button>
    );
  }
}

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('root')
);