목표

• 리액트 공식문서 살펴보기

결과

React란?

UI를 만들기 위한 JS 라이브러리

React의 3가지 특징

1. 선언형
   • 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하면 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링.
   • 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어줌.
2. 컴포넌트 기반
   • 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들고 이를 조합해 복잡한 UI를 만듦.
   • 컴포넌트 로직은 템플릿이 아닌 JS로 작성되므로 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음
3. 한 번 배워서 어디에서나 사용하기
   • 기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있음
   • Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있음.

컴포넌트

간단한 컴포넌트

• React 컴포넌트는 render()라는 메서드를 구현하는데, 이것은 데이터를 입력받아 화면에 표시할 내용을 반환하는 역할을 함.

• 이 예제에서는 XML과 유사한 문법인 JSX를 사용.

• 컴포넌트로 전달된 데이터는 render()안에서 this.props를 통해 접근 가능.

• React를 사용하기 위해 JSX가 꼭 필요한 것은 아님. JSX를 컴파일한 JS 코드를 확인하려면 Babel REPL 이용.

• 예제

  // JS 문법 이용
  class HelloMessage extends React.Component {
    render() {
      return React.createElement(
        "div",
        null,
        "Hello ",
        this.props.name
      );
    }
  }
  
  root.render(React.createElement(HelloMessage, { name: "Taylor" }));

  // JSX 문법 이용 -> 컴파일 시 JS로 변경됨
  class HelloMessage extends React.Component {
    render() {
      return <div>Hello {this.props.name}</div>;
    }
  }
  
  root.render(<HelloMessage name="Taylor" />);

상태를 가지는 컴포넌트

• 컴포넌트는 this.props를 이용해 입력 데이터를 다루는 것 외에도 내부적인 상태 데이터를 가질 수 있고, 이는 this.state로 접근.
• 컴포넌트의 상태 데이터가 바뀌면 render()가 다시 호출되어 마크업이 갱신됨.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

애플리케이션

props와 state를 사용해서 간단한 Todo App을 만들 수 있음.
이 예제에서는 state를 사용해 사용자가 입력한 텍스트와 할 일 목록을 관리함.
이벤트 핸들러들이 인라인으로 각각 존재하는 것처럼 보이지만, 실제로는 이벤트 위임을 통해 하나로 구현됨.

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);

외부 플러그인을 사용하는 컴포넌트

React는 유연하며 다른 라이브러리나 프레임워크를 함께 활용할 수 있음.
이 예제에서는 외부 마크다운 라이브러리인 remarkable을 사용해 <textarea>의 값을 실시간을 변환

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

root.render(<MarkdownEditor />);

Reference
React 공식 문서