티스토리 뷰
1. 프레임워크 vs. 라이브러리
2. Front-end 프레임워크 등장 배경
3. React 소개 및 사용 방법
1. 프레임워크 vs. 라이브러리
프레임워크(framework)는 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것이다.
프레임워크는 뼈대나 기반구조를 뜻한다. 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등 어느 정도의 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발하면 된다.
오늘 소개할 React와 예전부터 사용해왔던 Node.js의 express는 모두 프레임워크에 속한다.
라이브러리(Library)는 특정 기능 수행을 위해 활용 가능한 도구 또는 함수들의 집합이다. 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는 또는 필요한 것을 제공해주는 역할을 한다.
프레임워크와 라이브러리는 제어 흐름에 대한 주도성이 누구에게 있는지에 따라 차이점이 존재한다. 라이브러리는 코드를 구현하다가 필요할 때 가져와서 사용하고 호출하지만, 프레임워크는 가져다가 사용한다기 보다는 프레임워크의 틀 안에 들어가서 사용한다.
즉, 애플리케이션의 흐름을 누가 쥐고 있느냐에 따라 다르다. 프레임워크는 전체적인 흐름을 프레임워크 스스로가 쥐고 있고 사용자는 그 틀 안에서 필요한 코드를 작성하고 구현하는 반면 라이브러리는 사용자가 전체적인 흐름을 쥐고 필요 시 라이브러리를 가져다가 쓰는 것이다.
자동차에 비유하자면, 프레임워크는 자동차를 기본적으로 구성하고 있는 뼈대를 말하고 라이브러리는 자동차의 기능을 하는 부품(바퀴, 헤드라이트, 와이퍼 등)이다.
2. Front-end 프레임워크 등장 배경
Front-end 프레임워크와 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다.
정적인 웹 페이지는 웹 서버에 이미 저장되어있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지이다. 기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 사용자와의 상호작용은 중요하지 않은 요소로 볼 수 있다. 이러한 경우에는 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있다.
반면, 동적인 웹 페이지는 사용자의 행동 흐름에 따라 구성을 다르게 해준다. 즉, 사용자의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 전달받게 된다.
최근에는 동적인 페이지가 주를 이루고 있어서 웹 페이지보다 웹 애플리케이션이라는 용어가 더 어울릴 정도로 사용자와의 상호작용을 처리하기 위한 상태 변화가 많아졌다. 이를 자연스러운 유저 인터페이스로 만들어주기 위해서 Front-end 프레임워크 / 라이브러리가 등장하게 된 것이다.
각각의 Front-end 프레임워크 / 라이브러리 들은 추구하는 방향과 특징이 다르다.
3. React 소개 및 사용 방법
React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 프레임워크이다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하면, React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.
[React 공식 홈페이지]
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
React를 사용하기 위해 먼저 CDN 링크를 HTML 파일의 <head>태그 안에 추가해야 한다.
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>위의 코드 중 첫 번째 줄과 두 번째 줄은 각각 React와 ReactDOM 사용에 대한 스크립트이고, 세 번째 줄은 text/javascript 대신 text/babel이라는 스크립트 type을 사용하기 위해 필요하다. 위의 2개의 <script>는 페이스북에서 만들었다고 한다.
컴포넌트(Component)는 UI를 구성하는 개별적인 뷰 단위로서, UI 개발을 레고라고 한다면 컴포넌트는 블록 역할을 한다. 이러한 블록을 조립하여 하나의 완성품을 만드는 것과 같다. 예를 들어, 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 된다.
이러한 특징은 생산성과 유지 보수를 용이하게 한다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업의 경우 컴포넌트의 재사용 기능으로 보완할 수 있다.
지금까지는 습관적으로 <script> 태그의 type을 text/javascript로 써왔는데, 위의 그림에서는 text/babel을 썼다.
그 이유는 <script> 태그 안에서 HTML의 요소를 사용하기 위함이다. 이를 자바스크립트에 대한 확장 구문인 JSX(JavaScript + XML)라고 한다.
class를 선언할 때 그 이름의 첫 번째 글자는 대문자로 적는다. 만약 input이라는 class를 선언한 뒤 ReactDOM.render() 안에 <input/>이라고 적으면 이것이 기존에 있던 <input/> 엘리먼트를 가리키는 것인지 새로 선언한 class를 말하는 것인지 알 수 없을 것이다.
ReactDOM.render()에는 2개의 인자가 들어가는데, 첫 번째 인자값은 넣어줄 내용이 들어가고 두 번째 인자값은 넣어줄 곳을 적어준다. [그림 4] 에서는 <App/>이라는 컴포넌트를 id가 root인 <div> 태그의 하위에 넣어주겠다는 뜻이다.
Live Server로 실행하면 브라우저에 결과가 제대로 나타나는 것을 볼 수 있다.
컴포넌트의 render() 메소드의 return 값에는 기본적으로 1개의 태그만 넣을 수 있는데, 여러 개를 넣고 싶을 때에는 <React.Fragment> 태그로 감싸주면 된다.
class Tail extends React.Component{
render() {
return(
<React.Fragment>
<td>5</td>
<td>안녕</td>
<td>leejy</td>
<td>2022-04-12</td>
<td>13</td>
</React.Fragment>
)
}
};위의 예시 코드에서는 <React.Fragment> 태그 없이 <td> 태그 5개를 쓰면 에러가 발생하지만, <React.Fragment> 태그를 사용하면 정상적으로 동작한다.
'React' 카테고리의 다른 글
| [React] css 적용하기 (0) | 2022.04.20 |
|---|---|
| [React] 구구단 게임 (0) | 2022.04.20 |
| webpack 소개 및 사용 방법 (0) | 2022.04.20 |
| [React] 틱택토 게임 구현 (0) | 2022.04.17 |
| [React] props & state (0) | 2022.04.13 |
- Total
- Today
- Yesterday
- Char
- 자료형
- 변수
- 리액트 #React #props #state #javascript
- History 객체
- long
- int
- short
- gcc
- DOM
- window 객체
- bom
- c언어
- Screen 객체
- location 객체
- Document Object Model
- 키워드
- Navigator 객체
- Browser Object Model
- stdio.h
- keyword
- 컴파일
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |