댓글 검색 목록

[Reactjs] React JS의 10 가지 기본 개념

페이지 정보

작성자 운영자 작성일 21-05-20 10:00 조회 983 댓글 0

요즘 React Js는 웹 개발을 위한 꽤 인기있는 프레임 워크였습니다. 그것은 매우 성공적으로 만든 몇 가지 놀라운 기능을 제공합니다. 여기에서 제가 흥미롭다고 생각하는 10 가지를 소개합니다. —

Virtual DOM:

가상 DOM (VDOM)은 UI의 이상적인 또는 "가상"표현이 메모리에 유지되고 ReactDOM과 같은 라이브러리에 의해 "실제"DOM과 동기화 되는 프로그래밍 개념입니다.

대부분의 자바 스크립트 프레임 워크에서 DOM 조작은 아주 작은 변경이라도 모든 변경에 대한 응답으로 DOM 전체를 업데이트 / 재 구축합니다. 현대 웹 사이트에는 많은 데이터가 있을 수 있으며 많은 양의 DOM 조작을 사용할 수 있습니다. 이러한 시나리오에서 프로세스는 매우 비효율적입니다.

Virtual DOM은 실제 DOM에 대한 청사진처럼 작동합니다. 모든 DOM 객체 반응에 대해 DOM의 표현이 되는 해당 가상 DOM 객체를 생성합니다.

이러한 VDOM은 실제 DOM과 동일한 속성이지만 화면 표시 요소를 직접 변경할 수 있는 기능이 없습니다. DOM 조작은 느릴 수 있지만 화면에 아무것도 표시되지 않으므로 VDOM 조작이 더 빠릅니다.

VDOM 업데이트는 또한 모든 VDOM 개체를 업데이트하지만 앞에서 언급 했듯이 여전히 매우 빠릅니다. VDOM이 업데이트 되면 react는 업데이트 된 VDOM을 바로 이전 VDOM (업데이트 전)과 비교합니다.

이 방법은 react가 정확히 어떤 VDOM 객체가 변경되었는지 파악하고 화면에 표시 할 실제 DOM 만 변경합니다.

따라서 React는 DOM의 필요한 부분 만 업데이트하여 매우 효율적입니다.

JSX :

react의 JSX는 React.createElement (component, props, ... children) 함수 만 작성하는 구문 버전입니다. JSX의 코드 형식은 다음과 같습니다.

const jsxElement = <h1 className= ”greeting”> Hello World ! </h1>

이것을 JSX라고 하며 JavaScript의 구문 확장입니다. 이 코드는 이런 식으로 React.createElements() 호출로 컴파일 됩니다.

React.createElemet(
    ‘h1’,
    {className: ‘greeting’},
    ‘Hello World !’
)

이 함수는 차례로 다음과 같은 객체로 변환됩니다.

const jsxElement = {
    type: ‘h1’,
    props: { 
        className: ‘greeting’,
        children: ‘Hello World !’
    }
}

Embedding expressions in JSX

유효한 JavaScript 표현식은 다음과 같은 JSX 코드에 포함될 수 있습니다.

const user = “Tom Cruise”
const jsxElement = <h1> Hello, {user} </h1>

React Elements:

요소는 구성 요소의 구성 요소입니다. 간단한 요소의 예는 다음과 같습니다.

const element = <h1>I am an Element</h1>

Rendering Elements:

React 앱은 일반적으로 HTML 파일에 단일 루트 DOM 노드 (<div id = "root"> </ div>)를 가지며 react DOM이 그 안의 모든 것을 관리합니다.

루트 DOM 노드에서 반응 요소를 렌더링 하려면 둘 다 ReactDOM.render()로 전달되어야 합니다.

const element = <h1>I am an Element</h1> ;
ReactDOM.render(element, document.getElementById("root"));

Components:

컴포넌트는 임의의 입력을 소품으로 취하고 UI에 대한 요소를 반환하는 JavaScript 함수입니다. 이를 통해 개발자는 앱의 다른 섹션을 신중하게 작업 할 수 있습니다.

컴포넌트는 JavaScript 함수로 정의됩니다.

function Greeting (props) {
    return <h1>Hello, {props.name}</h1>
}

이제 이 함수를 <Greeting /> 컴포넌트로 호출 할 수 있습니다.

Class Components:

구성 요소 a]는 ES6 클래스로 정의 할 수도 있습니다. 함수 및 클래스 구성 요소는 모두 동일한 기능을 가지고 있습니다.

class Greeting extends React.Component {
    render () {
         <h1>Hello, {this.props.name}</h1>
        }
}

구성 요소를 정의하는 두 가지 방법은 모두 반응과 동일합니다.

Component rendering:

구성 요소를 렌더링 하는 것은 요소를 렌더링 하는 것과 같습니다. 여기서 요소는 정의 된 구성 요소를 나타냅니다.

function Greeting (props) {
    return <h1>Hello, {props.name}</h1>
}

const element = <Greeting />;

ReactDOM.render(
    element,
    document.getElementById(“root”)
);

Component Lifecycle:

구성 요소를 렌더링 (react에서 "마운팅"이라고 함)하거나 구성 요소를 제거 (react에서 "Unmounting"이라고 함)하거나 props 또는 상태를 변경할 때 ( "업데이트 중"이라고 함) 많은 구성 요소 수명주기 메서드가 있습니다. react).

일반적으로 사용되는 수명주기 방법은 다음과 같습니다.

mounting

이러한 메서드는 구성 요소의 인스턴스가 생성되어 DOM에 삽입 될 때 다음 순서로 호출됩니다.

constructor()
render()
componentDidMount()

updating

업데이트는 props 또는 state의 변경으로 인해 발생할 수 있습니다. 이러한 메서드는 구성 요소가 다시 렌더링 될 때 다음 순서로 호출됩니다.

render()
componentDidUpdate()

unmounting

이 메서드는 구성 요소가 DOM에서 제거 될 때 호출됩니다.

componentWillUnmount()