1-1 개요
오늘은 React가 무엇인지 중점으로 포스팅을 할 예정입니다.
ReactNative를 배우기 전에 React에 대해서 조금 알고 넘어가야하는 부분이 있기때문에 처음에는 React위주로 다루어볼려 합니다. 향후 계획은 ReactNative를 중점적으로 포스팅할 예정이며, React에서는 Component와 Hook위주로 설명하고 넘어가겠습니다.
도움이 되시길 바라면서 시작하겠습니다 🙏
1-2 React
React는 JavaScript 라이브러리 중 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용됩니다.
React말고도 Angular, Vue.js 등 다양한 프론트 엔드 프레임워크가 존재하는데 2020년 기준 React가 점유율이 가장 높습니다.
1-3 React의 장점
- Virtual Dom을 사용하여 보다 속도가 빠른 Web Application을 만들 수 있다.
- 재사용 가능한 UI단위 코드블럭인 Component로 만들어 효율적으로 화면 구성을 할 수 있다.
- 점유율이 높은 많큼 풍부한 생태계를 갖추고 있다.
이런 장점들을 가지고 있는데요. 아직 생소할 수 있는 단어인 Virtual Dom과 Component를 포함하여 React의 중요한 요소 몇가지를 설명하겠습니다.
1-4 Virtual Dom
React의 특징 중 하나인 Virtual Dom은 가상 트리형태의 자료 구조입니다. 파란색 노드는 업데이트를 하는 상태이고 갈색 노드는 업데이트를 하지 않는 노드인데 RealDom 같은 경우는 한 요소에서 변경이 발생하더라도 전체 트리구조를 업데이트를 하는 경우도 발생하기 때문에 렌더링 성능이 떨어집니다. 하지만 Virtual Dom은 변경사항을 추적하여 전체 트리의 다른 부분에는 영향을 주지 않고, 매핑된 특정요소만 업데이트 하게 도와줍니다.
1-5 Component
컴포넌트는 재사용 가능한 코드블록으로 UI단위를 구성합니다. 따라서 리액트로 작성된 화면은 컴포넌트로만 구성되어있습니다. 리액트 컴포넌트는 함수 형태, 클래스 형태로 작성이 가능합니다. 이번 포스팅에서는 간단하게만 다루고 다음 포스팅 때 자세히 다루겠습니다.
컴포넌트는 크게 2가지 인스턴스 속성을 가지고 있습니다.
- props : 상위 컴포넌트에서 하위 컴포넌트에서 값을 전달할 때 사용(읽기 전용 데이터)
- state : 컴포넌트 내부에서 값을 저장하거나 변경할 수 있는 객체(컴포넌트의 상태 관리)
→Lifecycle
모든 컴포넌트는 라이프사이클을 갖고 있습니다. 위에 사진을 보면 굉장히 복잡해 보이는데 요약하면 UI가 생성되면서 업데이트되고 사라지는 과정에 대한 시점별로 Method를 만든 것입니다. 이것을 활용하여 생성될 때 어떤 동작을 할껀지, 언제 업데이트가 실행되는지를 정의할 수 있습니다.
1-6 JSX
JSX는 JavaScript를 확장한 문법입니다. 기존의 HTML과 JavaScript를 따로 작성했던 방식과 달리 하나의 파일에 마크업과 로직을 작성할 수 있게 만든 언어입니다. 이 언어를 사용해서 React element를 생성합니다.
자바스크립트 문법과 동일한데 HTML을 작성할때 중요한 규칙이 있습니다.
—바뀐규칙
- 태그는 무조건 닫는다.
- 반드시 하나의 부모 요소로 감싸준다.
- HTML안에서 JavaScript 사용은 중괄호를 이용한다.
🍭 Example
import React, { Component } from 'react';
class App extends Component {
const name = 'React'
render() {
return (
<div> {/* 하나의 부모 요소로 감싼다*/}
<h1>Hello {name}</h1> {/* 자바스크립트의 사용 {name}*/}
<input type="text"/> {/* HTML : <input type = "text"> */}
</div>
);
}
}
export default App;
1-7 마치며
React-Native를 하기전에 React가 무엇인지 간단하게 알아보았습니다.
React-Native에서도 React 컴포넌트를 이용한 Hook함수를 많이 사용하기 떄문에 꼭 집고 넘어가야한다고 생각해서 다루었고 다음시간은 React Component에 대해 집중적으로 다루겠습니다.
감사합니다. 🙏
Uploaded by Notion2Tistory v1.1.0