React

React를 사용하는 이유

웹을 만들기 위해선 HTML, CSS, JS를 이용해야 한다.

 

하지만 웹이 점점 복잡해지면서 더 많은 HTML, JS가 들어가게 된다.

하나의 HTML 파일에 수많은 JS 라이브러리, HTML 요소들을 포함하게 된다.

하나의 파일에 코드 수가 점점 많아지면 개발자 입장에서는 유지보수하기가 어려워진다.

ㄴ어느 코드에 문제가 생겼는지 확인하기 위해 수천 줄의 코드를 확인해야할 수도 있고,

코드끼리 의존성이 깊을수록 복잡해진다.

또한, 많은 JS 라이브러리를 불러와서 사용하다 보면 라이브러리 객체들끼리 이름이 같아 충돌할 수도 있고,

관리하기도 어려워진다.

 

React를 사용하면 이런 문제들을 해결할 수 있다.

페이스북에서 만든 라이브러리로 웹 개발을 편하게 개발할 수 있도록 도와준다.

 

React의 경우 node js와 npm을 이용해서 개발한다. 기존의 웹 환경과 다르게 프로그램을 설치하고

실행시키기 위해 명령어를 사용하게 된다.

 

node : 외부 자바스크립트 파일을 npm이 맡아서 관리한다. 보통 npm에 외부 라이브러리를

한 번에 다 저장해놓은 후 관리해준다.

 

React 특징

React의 핵심 개념은 "Component(컴포넌트)"이다.

컴포넌트는 UI를 표현하는 요소로 React에서 정말 많이 사용된다.

UI요소들을 잘개 쪼개서 컴포넌트로 만들고 페이지에서 컴포넌트를 합치는 개념이라고 보면 된다.

컴포넌트를 나눠서 개발하게 되면 재활용할 수 있다는 큰 장점이 있다.

하나의 코드를 여러 곳에서 활용할 수 있으면 관리하기도 용이하고, 개발 시간도 단축된다.

 

가상 DOM

React의 가장 큰 특징 중 하나는 Virtual DOM(가상 돔) 기술을 사용한다는 것이다.

DOM : 브라우저에서 최종족으로 화면에 그려주는 HTML 결과물을 의미

DOM을 조작할 때 JS를 사용해서 조작한다. (조금 더 편하게 DOM을 조작하기 위해 나온 기술 : jQuery)

 

원래는 DOM을 변경하기 위해 브라우저가 처음부터 열심히 계산을 해서 화면에 요소들을 보여준다.

그러나 가상 DOM을 사용하면 가상으로 DOM 계산을 빠르게 수행해서 최종적인 결과만 실제 DOM에

전달해준다.

ㄴ브라우저가 DOM을 변화시키기 위해 연산되는 양을 줄여서 성능을 개선시킬 수 있게 되는 것

 

빌드

React는 Webpack, Babel 빌드 도구를 사용하고 있어 빌드 과정을 거쳐야 브라우저가 읽을 수 있게 된다.

 

컴포넌트 기본 구조

컴포넌트가 화면에 보여지는 작업 : 렌더링(Rendering)

 

컴포넌트라고 부를 수 있는 조건

1. 함수로 구성되어 있으며

2. 반드시 UI 요소를 return해야 한다.

UI요소는 HTML 태그와 거의 똑같다고 보면 된다.

1. HTML 태그에서 쓰이던 class 속성은 className으로 쓰인다.

2. 컴포넌트를 태그 형식으로 넣을 수 있다.(ex. Banner라는 이름의 Component를 만들었다면

<Banner />이렇게 컴포넌트를 넣을 수 있다.

 

 

JSX

React에서 컴포넌트를 만들 때 jsx라는 문법(형식)을 사용한다.

대표적인 특징 중 하나로 javascript 문법을 태그들 사이에 사용할 수 있다.

간편하게 {} 사이에 작성하면 된다.