React는 굉장히 인기있는 프론트엔드 라이브러리중 하나이다.
페이스북에서 만든 UI구축을 위한 라이브러리로 유저의 view에 초점을 맞춘다.
그래서 Routing 같은 기능이 리액트 자체에는 들어가 있지 않다.
하지만 이는 가장 맘에드는 라이브러리를 사용하거나 심지어 직접 만들어서 사용 할 수도 있다는 점이다.
send me email if you have any questions.
프론트엔드 라이브러리
웹사이트를 만들기 위해선 사실, 프론트엔드 라이브러리의 도움 없이도 만들어낼 수 있다.
단순히 정적 페이지를 만드는거라면 자바스크립트 없이도 그냥 HTML 과 CSS 를 사용해서 만들면 된다.
하지만 요즘의 웹은 단순히 웹 페이지 가 아니라 웹 애플리케이션이다.
즉 유저와의 인터랙션이 많아짐에 따라 DOM요소들을 직접 관리하고 코드를 정리하는것은 귀찮고 번거로운 일이다.
What is DOM?
웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
웹 개발을 할 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌다.
대표적으로 Angular, Vue, React가 있다
React 특징
1. Component기반
컴포넌트는 간단하게 설명하자면 데이터를 넣었을 때 우리가 지정한 유저 인터페이스를 조립해서 보여준다.
즉, 코드의 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 크게 향상시킨다.
프론트를 짤 때 긴 HTML코드를 작성한다고 가정해보자. 그 코드를 수정해야한다면 꽤나 번거롭고 실수했을때의 문제도 클 것이다.
컴포넌트 기반인 React로 개발한다면 수정해야할 부분의 파일만 수정하면 된다.
2. JSX문법
JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이다.
class HelloReact extends React.Component {
render() {
return (
<div>
Hello React! {this.props.name}
</div>
);
}
}
기존의 JavaScript에서는 HTML태그를 사용할 수 없지만 JSX는 이를 가능하게 한다.
이는 React의 사용성을 증가시키는 효과를 가져온다.
3. Virtual DOM
Virtual DOM 은 가상의 DOM으로, 변화가 일어나면 실제로 브라우저의 DOM 에 새로운걸 넣는것이 아니라 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다.
이는 DOM의 요소를 굉장히 많이 수정한다고 할 때
DOM의 변화를 최소화 시켜주기 때문에 불필요한 연산이 매번 일어난다는 단점을 보완한다.