React ?

 

웹의 발전

1세대 웹

HTML을 중심으로 한 정적인 화면을 구현하는 데 그쳐 있었다

야후가 대표적인 사이트이며 온라인 방명록 같은 게 있을 수 있다

 

2세대 웹

웹 1.0(1세대)는 인터넷을 통해 일방적인 정보를 보여주었다면,

웹 2.0(2세대)는 사용자가 직접 콘텐츠를 생산하여 쌍방향으로 소통할 수 있다.

게시판, 댓글, 블로그, UCC, 지식백과 등이 있다

 

3세대 웹

우리가 HTML을 배울 때 먼저 듣게 되는 말인 시멘틱 웹 기술을 사용하고 내용을 이해하며 맞춤형 정보를 제공하는 지능형 웹 기술을 도입한 게 3세대 웹이다

읽기 쓰기를 넘은 소유라는 개념이 생기기 시작하였고 데이터를 동적으로 처리하고 사이트를 다이내믹하게 구성하는 요소들이 많이 생겨나면서 나오기 시작한 프레임워크와 라이브러리 중 하나가 리액트이다

리액트는 라이브러리이다

JS를 도와주는 도구 라이브러리

 

 

가상 돔??

DOM은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스이다

가상 돔이란 말 그대로 가상의 돔, 실제 DOM의 사본 같은 개념이다.

DOM트리는 수정될 때마다 실시간으로 렌더링 작업이 반복적으로 일어나게 된다

가상 돔은 변경된 사항만 실제 DOM에 반영하여 불필요한 렌더링 횟수를 줄일 수 있다

 

JSX

javascript를 확장(XML)한 문법이다

브라우저를 실행하기 전 바벨이라는 것을 사용하여 자바스크립트 형태의 코드로 변환한다

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용한다

중괄호 안에는 Javascript의 표현식을 넣을 수 있다

예를 들면 2 + 2, user.firsName 같은 것들을 넣어서 사용할 수 있다

 

 

See the Pen Untitled by shinjihoon (@SJH8730) on CodePen.