리액트 공부 #1

그저께부터 리액트 공식 홈페이지 자습서를 통해 리액트를 공부 중이다.  가볍게 읽으며 공부하기엔 제대로 이해되지 않기 때문에 메모를 하면서 공부를 해야겠다는 생각이 들었다. 그래서 블로그에 조금씩 메모를 남기며 공부할 것이다. 리액트를 공부하는 목적은 건우와 함께 만들 서비스의 웹 페이지를 구현하기 위해서다.

자습서: React 시작하기 – React

개요

React.Component를 상속하는 클래스를 정의한다. 이 클래스는 HTML 태그처럼 사용될 수 있다. 이를 React 컴포넌트 클래스라고 부른다. 이러한 개별 컴포넌트는 props라는 멤버를 통해 매개변수를 받아온다. properties의 줄임말 같다. 매개변수는 태그에 속성을 적는 것처럼 전달할 수 있다. <Square value={i} />처럼 적으면 Square 컴포넌트에서 this.props.value로 접근할 수 있다.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 사용 예제: <ShoppingList name="Mark" />

컴포넌트가 실제로 어떻게 보여질지는 컴포넌트 클래스의 render 함수가 반환하는 내용으로 결정된다. 그 내용을 JSX라는 문법으로 작성하는데 HTML과 상당히 유사하다. 사실 HTML에 기능을 얹은 느낌이다. 리액트는 JSX로 작성된 내용을 리액트 앨리먼트라는 것으로 경량화 하여 처리한다. 리액트 앨리먼트는 JSX 코드를 자바스크립트 코드로 변환한 것으로 보인다.

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

무언가를 기억하기 위해서는 state라는 멤버를 이용해야 한다. 컴포넌트 클래스에 생성자를 추가하고 그 안에서 this.state를 설정함으로써 이를 가질 수 있다. 생성자의 서두에서는 상위 클래스(React.Component)의 생성자를 super를 통해 호출해주는 것을 잊지 말자. state는 setState 함수를 통해 변경할 수 있으며, 컴포넌트 내부의 자식 컴포넌트까지 업데이트한다. 해당 state를 갖는 컴포넌트와 그 하위 컴포넌트의 render 함수가 다시 호출된다고 생각하면 될 것 같다.

게임 완성하기

예제에서는 상위 컴포넌트에서 하위 컴포넌트로 handleClick 함수를 전달했다. 이를 통해 하위 컴포넌트를 클릭했을 때, 상위 컴포넌트의 state가 바뀔 수 있도록 하였다. 함수가 일급객체로 취급되는 자바스크립트이기에 손쉽게 이러한 구현이 가능한 것일 것이다. 이러한 관계에서 하위 컴포넌트를 제어되는 컴포넌트라고 부른다고 한다.

함수 컴포넌트는 state 없이 render 함수만을 가진다. 클래스 정의를 하지 않고 props를 인수로 받는 함수로 정의된다. 클래스 정의가 아니라 함수 정의이므로 this 키워드는 쓰이지 않는다. 또한, props.onClick은 함수이므로 화살표 함수를 통해 표현해주지 않아도 된다. () => props.onClick()이나 props.onClick이나 결과적으로 보면 같은 표현이다.

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

시간 여행 추가하기

리액트에서 리스트를 렌더링할 때는 키를 지정할 것을 권고하고 있다. 이를 지정하지 않으면 state가 업데이트 되었을 때, 리액트 입장에서 어떤 것이 변화했는지 알기 어려울 수 있다. 그래서 각 아이템들을 구별해주기 위해 key를 지정할 수 있다. key에 대하여 자습서에서는 ref와 같은 성격을 지니는 prop이라고 설명하고 있다. key는 this.props.key로 참조할 수 없다고 한다. 별도로 키를 지정하지 않을 경우 리액트에서는 인덱스를 키로 사용한다. setState로 상태를 바꿀 때, 인수에 언급된 프로퍼티만 업데이트 된다. 인수에 적지 않은 프로퍼티가 없어지는 것이 아니다.