#1 React(리액트), React란

React(리액트)란 무엇인가? React(리액트)는 페이스북에서 제공하는 자바스크립트 UI(사용자 인터페이스) 라이브러리입니다. 즉, UI 라이브러리이기 때문에 프론트엔드에서 사용되는 라이브러리입니다. 프론트 앤드에 대한 설명은 아래 링크에 있습니다.

프론트 엔드 : namu.wiki/w/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C

또한 React(리엑트)는 선언형 프로그래밍이며, 컴포넌트 기반으로 되어있습니다. 
선언형 프로그래밍에 대한 설명은 아래 링크에 있습니다.
선언형 : ko.wikipedia.org/wiki/%EC%84%A0%EC%96%B8%ED%98%95_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D#:~:text=%EC%84%A0%EC%96%B8%ED%98%95%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%80%20%EB%91%90,%22%EC%84%A0%EC%96%B8%ED%98%95%22%EC%9D%B4%EB%9D%BC%EA%B3%A0%20%ED%95%9C%EB%8B%A4.

React의 특징

1. JSX
리액트는 JSX를 사용할 수 있습니다. 하지만 꼭 JSX를 사용해야만 하는 것은 아닙니다.
JSX 문법이란 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성해주는 문법입니다.

아래는 공식 리엑트 사이트에 나와있는 내용입니다. 

JSX 문법을 사용함

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

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

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'));

둘의 차이가 느껴지시나요? 

2. Component 기반
컴포넌트란 독릭접인 단위의 소프트웨어 모듈을 말합니다.
React(리액트)는 웹에서 쓰는 각 요소들을 컴포넌트로 만들어서 여러 화면에서 재사용 할 수있게 해줍니다.예를 들어 수정이 필요할 경우에는 필요한 컴포넌트를 찾아 그 컴포넌트만 수정하면 되겠죠?

3. 한 번 배워서 어디서나 사용가능 React(리액트)는 Node.js를 이용해서 서버에서 렌더링을 할 수도 있으며, Reac-Native를 이용해서 모바일 앱을 만들 수도 있습니다.

리액트에 대한 실습 및 더 자세한 내용은 아래 링크에 있습니다.

reactjs.org/

React – A JavaScript library for building user interfaces