React

최초의 웹이 나온 이후로 웹은 계속해서 발전되어 왔다. 처음에는 단순히 정적인 정보만을 제공하는 웹이었지만 스타일을 입히기 위해서 CSS가. 사용자와 상호작용하는 동적인 페이지를 구성하기 위해 JavaScript 가 더해졌다. 하지만, 웹의 규모는 더욱 커져갔고 수많은 데이터와 유저와 상호작용 하기 위해서 효율적인 프레임워크나 라이브러리가 필요하게 됐다.

What is React?

리액트는 페이스북에서 만든 UI를 위한 자바스크립트 Library이다. 공식 홈페이지의 소개 문구에도 나와 있는 것처럼 UI를 만드는 것에 집중하고 있다.

프레임워크 vs 라이브러리

리액트는 자바스크립트 라이브러리라고 이야기 했다. 그렇다면 Angular 나 vue 등의 프레임워크와 라이브러리의 차이는 무엇일까.

프레임워크

• 여러가지 기능들이 묶어져서 함께 제공된다.
• 제공된 기능들을 통해서 어플리케이션을 만들어야 한다.
• 사용법에 대해서 공부하는데 시간이 오래 걸린다.

라이브러리

• 특정 목적을 위해 만들어진 기능을 사용할 수 있다.
• 여러 라이브러리를 조합하여 입맛에 맞게 사용할 수 있다.
• 볼륨이 작아 상대적으로 빠른 시간안에 배울 수 있다.
• 특정 기능만 제공하므로 여러 기능을 사용하기 위해서는 다른 라이브러리가 필요하다.

리액트의 특징

컴포넌트

리액트의 특징 중에 하나는 컴포넌트의 조합을 통해서 프로그래밍을 한다는 점이다. 컴포넌트는 재사용이 가능한 UI 단위를 이야기 한다.

// 댓글 하나를 나타내는 컴포넌트 예시.
class Comment extends Component {
  handleDelete = () => {
    this.props.onDelete(this.props.reply);
  };

  render() {
    const { userName, comment } = this.props.reply;
    const { isUser } = this.props.reply;
    return (
      <li className="feed__comment">
        <span>{userName}</span>
        <span>{comment}</span>
        <button type="button" className="comment__heart">
          <i className="far fa-heart" />
        </button>
        <button
          type="button"
          className="comment__delete"
          onClick={this.handleDelete}
        >
          <i class={isUser ? 'far fa-trash-alt' : 'far fa-trash-alt none'} />
        </button>
      </li>
    );
  }
}

export default Comment;

위의 코드는 댓글을 나타내는 컴포넌트의 예시이다. handleDelete 라는 메소드를 가지고 있으며 render 메서드 내의 내용을 통해서 어떻게 사용자에게 보여줄 지를 알 수 있다.

선언적

리액트의 다른 특징 중에 하나는 선언적 프로그래밍이라는 점이다. 우리는 그동안 DOM 요소를 가져와서 직접 조작하면서 어떤 절차로 사용자에게 보여질 지 명령형 프로그래밍을 해왔다.

하지만 리액트를 사용하게 되면 어떻게 보여지게 되는지 로직을 짜는 것이 아니라 state 와 props 라는 객체를 통해서 리액트가 알아서 보여주게 된다. 어떤 것을 보여줄 것인지 이야기를 하면 어떤 방법으로 보여줄 것인지는 리액트에서 진행하는 것이다.

// 코멘트를 화면에 보여주는 로직의 모습.
{this.state.comments.map(reply => (
  <Comment
    key={reply.id}
    reply={reply}
    onDelete={this.handleDelete}
  />

위의 코드를 보면 어떻게 DOM 요소를 생성하고 붙여줄 것인지에 대한 것이 아니라 state 를 통해서 <Comment>를 보여주면 된다 선언하고 있다.

가상 DOM

리액트는 가상 DOM 을 생성한다. 이를 이용해서 이전 메모리에 기억하고 있는 UI 정보와의 비교를 통해서 변경될 UI의 최소 집합을 계산할 수 있다. 그렇기 때문에 더 좋은 성능을 유지할 수 있고 빠른 렌더링 속도를 보여준다.

JSX

JSX 는 자바스크립트 확장 문법으로 자바스크립트 안에서 HTML 문법을 사용할 수 있도록 해준다.

특징

• render() 함수 내에서 return 될 때 형제 요소를 용인하지 않기 때문에 형제 요소가 필요한 경우라면 <> 이나 <React.Fragment> 등을 사용해서 묶어줘야한다.

• 어떤 요소도 self closing이 가능하다.

• CamelCase로 attribute 명을 작성해야 한다.

• JS와 HTML 를 동시에 사용할 수 있다.

• 자바스크립트 문법의 경우 {} 를 사용하여 작성해야 한다.

이렇게 간단하게 리액트에 대해서 정리를 해봤다. 리액트의 경우 state 와 props 를 통해서 화면의 렌더링을 진행하다보니 로직을 구성할 때 낯선 부분이 많다. 하지만, 직접 DOM 요소를 조작할 필요도 없고 하드코딩 을 많이 줄일 수 있어서 장점이 많다. 아직은 어렵지만 조금씩 더 리액트랑 친해져 볼 예정이다. 💪