React 입문하기 1. React란?

 

 새 프로젝트를 시작하기 앞서서 리액트 입문에 나섰다.
그 입문기를 적어보려고 한다.

먼저, 리액트란

페이스북 서버 개발자가 만든 프론트엔드 라이브러리이며, 자바스크립트로 구성되어 있다.

주로 웹, 앱 view 개발을 위해 사용한다.

리액트를 사용하려면 리액트의 특징이라고 할 수 있는 3가지 요소들을 알아야 한다.

 

1. JSX ( JavaScript eXtension )

JSX(JavaScript eXtension)는 자바스크립트 언어 문법의 확장이다.
HTML문법을 JS코드 내에서 사용 할 수 있게 해준다.
ex.
function App() {
  return (
      <div className="App"> //HTML태그를 JS상에서 사용 가능.
            Hello, React!!
      </div>
  );
}

2. Component 기반

state(상태)를 컴포넌트를 통해 값을 보관하며 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 전달할 수 있다.
ex.
class ParentComponent extends React.Component {
  state = { color: 'red' };
  render() {
     return (
        <ChildComponent color={this.state.color} />
     );
  }
}

• state
  하나의 컴포넌트가 가질 수 있는 변경 가능한 데이터,현재 컴포넌트에서 새로운 데이터를 만들어 낼 때 사용.
• props
  현재 컴포넌트 내에서 변경이 불가능. (고정값 but, 예전엔 변경이 가능했었다고 한다.)
  
  props state 모두 하위 컴포넌트에 상속이 가능하다.

3. Virtual DOM

가상 DOM을 사용한다.
리액트는 state(상태)가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링한다.
그리고 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜준다.
이로써 개발자는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데,
리액트 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만 렌더링해준다.


출처 : ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전

 

medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-2-f0e8d4a55740

 

---

DOM : 문서 객체 모델(DOM; Document Object Model) 객체 지향 모델로써 구조화된 문서를 표현하는 형식.