TIL - React란?
1. React란?
React는 UI를 만들기 위한 JavaScript 라이브러리 중 하나이다.
웹사이트를 만들기 위해서는 JavaScript 라이브러리 없이도 HTML, CSS, JavaScript로 충분히 구현할 수 있다. 그런데 왜 프론트엔드 라이브러리를 사용하는 것일까?
요즘의 웹사이트는 단순하고 정적인 사이트가 아니라 동적이며 다양한 기능을 가지고있다. 사이트의 규모가 커지면서 다양한 유저 인터렉션이 전달된다면 그만큼 DOM 요소들 또한 변화가 이루어져야 한다. 이렇게 많은 DOM 요소의 변화를 개발자가 직접 관리하는 것은 너무 어렵다. 그래서 개발자는 DOM 관리와 상태변화 관리를 최소화하고 오직 기능 개발, 사용자 인터페이스에 보다 더 집중할 수 있도록 하기 위해 프론트엔드 라이브러리를 사용한다.
다른 라이브러리와 다른 리액트의 대표적인 특징은 다음과 같다.
(1) Component 단위 작성
컴포넌트는 UI를 구성하는 개별적인 뷰 단위이다. 예를들어 블럭을 쌓아서 성을 만든다고 했을 때 블럭이 컴포넌트, 성이 UI에 해당한다.
이와같이 React는 기능별로, 단위별로 컴포넌트를 나눠서 코드를 작성한다.
컴포넌트 단위로 코드를 작성하면 다른 앱애서 쉽게 재사용이 가능하고, 문제 발생 시 해당 컴포넌트만 수정하면 되기 때문에 유지보수에 용이하다.
(2) JSX 문법 사용
JSX는 JavaScript 확장 문법이다.
리액트를 이용하여 웹사이트를 구현할 때 반드시 JSX 문법을 사용해야 하는 것은 아니지만 간결함과 편리함을 위해 보통 JSX를 이용하여 구현을 하고, JSX가 브라우저에서 실행되기 전 babel을 사용하여 일반 자바스크립트 형태의 코드로 변환하여 출력한다.
JSX 문법을 사용할 때에는 몇 가지 규칙이 있다.
(1) 반드시 하나의 엘리먼트로 감싸야 한다.
<li> <div>hello</div> <div>bye</div> </li>
div 태그로 작성된 엘리먼트를 li 태그로 감싸주었다.
(2) 자바스크립트 코드를 적용할 땐 { } 안에 작성한다.
class App extends Component { render() { const name = 'jiwon'; return ( <div> hello{name}! //<-- { } 안에 작성한다. </div> ) } }
(3) if문을 사용할 수 없다. -> 삼항 연산자를 사용한다.
<div> { (1+1 === 2)?(<h1>정답</h1>):(<h1>오답</h1>) } </div>
(4) 엘리먼트의 클래스 이름을 적용할 때 className을 사용한다.
<div className="app-container">hello</div>
es6 문법중에 class 키워드가 있기 때문에 클래스 이름을 적용할 때 class가 아닌 className을 사용해야 한다.
이번시간에는 리액트가 무엇인지에 대하여 공부하였다.
다음시간에는 리액트의 Lifecycle에 대하여 공부한다
오늘은 여기까지 :)
