[영어로 배우는 React]1. 그래서 React가 뭔데?

영어공부와 학습을 병행해 보려고 합니다. 

React를 영문으로 공부해 보는 거죠. 

쉽진 않겠지만 천천히 해보겠습니다. 

공부할 사이트는 React 공식 사이트입니다. 공식 사이트의 문서로 공부하면 좋은 점이 있습니다. 첫째로, 그것이 곧 법이 입니다. 다른데 문의할 필요가 없죠. 둘째, 자료가 최신입니다. 

 

 

사이트는 이렇게 생겼습니다. react.com으로 접속해 보면 됩니다.

오늘은 먼저 공식 사이트에서는 react를 어떻게 설명해 놨는지 보도록 하겠습니다. 슬로건이 제일 먼저 보이네요.

 

A JavaScript library for building user interfaces

 

'UI를 만들 수 있는 자바스크립트 라이브러리'라고 돼 있네요. 영어 초보라 해석이 매끄럽진 않습니다. 이해를...

모듈, 패키지, 라이브러리와 같은 단어들이 많이 쓰입니다. 저도 자주 헷갈리는데, React는 자바스크립트 라이브러리네요. 

 

1.선언적

React는 상호작용하는 UI를 쉽게 만들 수 있습니다. 각각의 상태에 대한 간단한 뷰(컴포넌트)를 만들면, 데이터가 변경될 때 각각의 컴포넌트를 업데이트하고 렌더링 할 수 있습니다. 선언된 컴포넌트는 디버그를 더 쉽게 만들어 줍니다.

 

2. 컴포넌트 기반

자신의 상태를 관리하는 캡슐화된 컴포넌트를 만들고, 그 컴포넌트를 결합하여 더 복잡한 UI를 만들 수 있습니다.

레고 블록 같은 걸 하나 만들고, 레고 블록으로 성 같은 걸 만든다고 생각하시면 될 것 같습니다.  

 

3. 한번 배워 여러 곳에 

한번 배워두면 코드를 재작성하지 않고 새 기능을 추가할 수 있습니다. Node를 이용하여 서버 쪽에서 랜더링을 할 수도 있고, React-native를 이용하여 파워 모바일 앱을 작성할 수 있습니다. 

 

 

종합하면 React는 자바스크립트 코드를 이용해서 컴포넌트를 만들고, 그 컴포넌트를 결합해서 UI를 만들 수 있고, 각 컴포넌트의 상태를 관리하고 있다가, 상태가 변경되면 내용과 화면을 다시 업데이트하는 자바스크립트 라이브러리라고 할 수 있겠습니다. 어려운 말들이 있긴 한데, 일단 이렇게 정리하고 넘어가죠. 전체적으로 한번 쭉 훑어보고 나면 이해가 더 빨라질 것 같습니다. 

 

* 용어

컴포넌트 : 코드를 이용하여 만든 작은 프로그램. 레고 블록을 생각하면 됨.

렌더링 : 컴퓨터를 이용해 영상이나 화면을 만들어내는 과정.

 

예) React 컴포넌트 예제

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

위 예제는 HelloMessage라는 컴포넌트 예제입니다. 컴포넌트는 React.Component를 확장해서 만들고,

 

<HelloMessage name = "Taylor" />

 

위 방식으로 name에 "Taylor"를 보내고, 

 

<div>

    Hello {this.props.name}

</div>

 

로 값을 받아서 출력하고 있습니다. 위 예제는 JSX 표기법을 이용했는데, JSX는 자바스크립트를 XML 형식으로 표기한 방식입니다. JSX방식이 아닌 자바스크립트 그대로 표기한 방식은 아래와 같습니다. 

 

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));

함수에 값을 JSON형식으로 전달해서 처리하네요.

아직은 이해가 안 갈지도 모릅니다. 눈에 익혀만 두세요.