React 컴포넌트 – 예제가있는 ReactJS의 소품과 상태



React Components에 대한이 블로그는 컴포넌트의 기본 사항, 컴포넌트가 모든 반응 컴포넌트 라이프 사이클과 함께 생성되는 방법에 대해 설명합니다.

'React에서는 모든 것이 구성 요소입니다.'

React에 익숙하다면이 문구를 여러 번 듣거나 읽었을 것입니다. 그러나 그것이 정확히 무엇을 의미하고 어떻게 사용되는지 알고 있습니까? 그렇지 않은 경우이 블로그를 읽고 React 구성 요소와 수명주기의 여러 단계에 대해 알아보세요. 나는 당신이 끝낼 때 확신합니다 이 블로그를 읽으면 React 구성 요소와이를 둘러싼 개념에 대해 완전히 이해하게 될 것입니다. 그러나 계속하기 전에 제가 논의 할 주제를 간략히 살펴보십시오.

Windows 10에서 PHP를 실행하는 방법

React 컴포넌트는 무엇입니까?

이전에는 개발자가 간단한 단일 페이지 애플리케이션을 개발하기 위해 1000 줄의 코드를 작성해야했습니다. 이러한 응용 프로그램의 대부분은 전통적인 DOM 구조를 따랐고 변경 작업은 개발자에게 매우 어렵고 지루한 작업이었습니다.변경이 필요한 요소를 수동으로 검색하고 그에 따라 업데이트해야했습니다. 작은 실수라도 응용 프로그램이 실패 할 수 있습니다. 게다가 DOM 업데이트는 비용이 많이 듭니다. 따라서 구성 요소 기반 접근 방식이 도입되었습니다. 이 접근 방식에서 전체 애플리케이션은 구성 요소라고하는 논리적 청크로 나뉩니다. React는이 접근 방식을 선택한 프레임 워크 중 하나였습니다.웹 개발에서 경력을 쌓을 계획이라면 일찍 시작하면 많은 기회가 열립니다.





이제 이러한 구성 요소가 무엇인지 이해하겠습니다.

React 컴포넌트는 사용자 인터페이스의 빌딩 블록으로 간주됩니다. 이러한 각 구성 요소는 동일한 공간에 존재하지만 서로 독립적으로 실행됩니다. React 구성 요소에는 자체 구조, 메서드 및 API가 있습니다. 재사용이 가능하며 필요에 따라 인터페이스에 삽입 할 수 있습니다. 더 잘 이해하려면 전체 UI를 트리로 간주하십시오.여기서 시작 구성 요소는 루트가되고 각 독립 조각은 분기가되어 하위 분기로 더 나뉩니다.



UI 트리-React 구성 요소-Edureka이렇게하면 UI가 체계적으로 유지되고 데이터 및 상태 변경이 논리적으로 루트에서 분기로 이동 한 다음 하위 분기로 흐르게됩니다. 구성 요소는 클라이언트 측에서 직접 서버를 호출하므로 DOM이 페이지를 새로 고치지 않고도 동적으로 업데이트 할 수 있습니다. 반응 구성 요소가 AJAX 요청의 개념에 기반하기 때문입니다. 각 구성 요소에는 서버를 호출하고 업데이트 할 수있는 자체 인터페이스가 있습니다. 이러한 구성 요소는 서로 독립적이므로 각 구성 요소는 다른 구성 요소 나 UI 전체에 영향을주지 않고 새로 고칠 수 있습니다.

우리는 사용 React.createClass () 구성 요소를 만드는 방법. 이 메소드는 React 컴포넌트를 정의 할 객체 인수를 전달해야합니다. 각 구성 요소는 정확히 하나를 포함해야합니다. 세우다() 방법. JavaScript, JSX에서 HTML 구문 분석을 담당하는 구성 요소의 가장 중요한 속성입니다. 이 세우다() 컴포넌트의 HTML 표현을 DOM 노드로 반환합니다. 따라서 모든 HTML 태그는 내부 태그로 묶어야합니다. 세우다() .

다음은 구성 요소를 만들기위한 샘플 코드입니다.



import React from 'react'import ReactDOM from 'react-dom'class MyComponent extends React.Component {render () {return (

귀하의 ID는 {this.state.id}입니다.

)}} ReactDOM.render (, document.getElementById ( 'content'))

상태 대 소품

React 컴포넌트 라이프 사이클

React는 컴포넌트 라이프 사이클의 특정 단계가 발생할 때이를 알리는 다양한 메소드를 제공합니다. 이러한 메서드를 수명주기 메서드라고합니다. 이러한 라이프 사이클 방법은 그리 복잡하지 않습니다. 이러한 메서드는 구성 요소 수명 동안 다양한 지점에서 호출되는 특수 이벤트 처리기로 생각할 수 있습니다. 이러한 메서드에 고유 한 코드를 추가하여 다양한 작업을 수행 할 수도 있습니다. 구성 요소의 수명주기에 대해 말하면 수명주기는 4 단계로 나뉩니다. 그들은:

  1. 초기 단계
  2. 업데이트 단계
  3. 소품 변경 단계
  4. 마운트 해제 단계

이러한 각 단계에는 해당 단계에만 해당하는 몇 가지 수명주기 메서드가 포함되어 있습니다. 이제 각 단계에서 어떤 일이 발생하는지 알아 보겠습니다.

ㅏ. 초기 단계 – React 컴포넌트 라이프 사이클의 첫 번째 단계는 초기 단계 또는 초기 렌더링 단계입니다. 이 단계에서구성 요소가 여정을 시작하고 DOM으로 이동하려고합니다. 이 단계는 미리 정의 된 순서로 호출되는 다음 메서드로 구성됩니다.

  1. getDefaultProps () : 이 방법은 기본값을 지정하는 데 사용됩니다. this.props . 컴포넌트가 생성되거나 부모의 소품이 전달되기 전에 호출됩니다.
  2. getInitialState () : 이 방법은지정 기본값 this.state 구성 요소가 생성되기 전에.
  3. componentWillMount () : 이것은 컴포넌트가 DOM으로 렌더링되기 전에 호출 할 수있는 마지막 메소드입니다. 하지만 전화하면 setState () 이 메서드 내에서 구성 요소는 다시 렌더링되지 않습니다.
  4. 세우다(): is 메소드는 단일 루트 HTML 노드를 반환하는 역할을하며 각각의 모든 구성 요소에 정의되어야합니다. 돌아올 수 있습니다 없는 또는 그릇된 아무것도 렌더링하고 싶지 않은 경우.
  5. componentDidMount () : 컴포넌트가 렌더링되고 DOM에 배치되면 메서드가 호출됩니다. 여기에서 모든 DOM 쿼리 작업을 수행 할 수 있습니다.

비. 업데이트 단계 – 구성 요소가 DOM에 추가되면 상태 변경이 발생할 때만 업데이트하고 다시 렌더링 할 수 있습니다. 상태가 변경 될 때마다 구성 요소는 세우다() 다시. 이 구성 요소의 출력에 의존하는 모든 구성 요소는 세우다() 다시. 이는 구성 요소가 최신 버전을 표시하도록하기 위해 수행됩니다. 따라서 구성 요소 상태를 성공적으로 업데이트하기 위해 다음 메서드가 지정된 순서로 호출됩니다.

  1. shouldComponentUpdate () : 이 방법을 사용하면 구성 요소의 자체 업데이트 동작을 제어 할 수 있습니다. 이 메서드에서 true를 반환하면구성 요소가 업데이트됩니다. 그렇지 않으면이 메서드가그릇된, 구성 요소가 업데이트를 건너 뜁니다.
  2. componentWillUpdate () : 그의 방법은 제이구성 요소가 업데이트되기 직전입니다. 이 메서드에서는 다음을 호출하여 구성 요소 상태를 변경할 수 없습니다. this.setState .
  3. 세우다(): 다음을 통해 거짓을 반환하는 경우 shouldComponentUpdate () , 내부 코드 세우다() 구성 요소가 제대로 표시되는지 확인하기 위해 다시 호출됩니다.
  4. componentDidUpdate () : 구성 요소가 업데이트되고 렌더링되면이 메서드가 호출됩니다. 구성 요소가 업데이트되면 실행하려는 코드를이 메서드에 넣을 수 있습니다.

씨. 소품 변경 단계 –컴포넌트가 DOM으로 렌더링 된 경우 상태 변경을 제외하고 컴포넌트가 업데이트되는 유일한 다른 시간은 prop 값이 변경 될 때입니다. 실제로이 단계는 이전 단계와 유사하게 작동하지만 상태 대신 소품을 처리합니다. 따라서이 단계에는 업데이트 단계의 추가 방법이 하나만 있습니다.

  1. componentWillReceiveProps () : 이 메서드는 구성 요소에 할당 될 새 prop 값을 포함하는 하나의 인수를 반환합니다.
    나머지 라이프 사이클 메소드는 이전 단계에서 본 메소드와 동일하게 작동합니다.
  2. shouldComponentUpdate ()
  3. componentWillUpdate ()
  4. 세우다()
  5. componentDidUpdate ()

디.마운트 해제 단계 –이것은 컴포넌트가 DOM에서 완전히 파괴되고 제거되는 컴포넌트 라이프 사이클의 마지막 단계입니다. 여기에는 하나의 방법 만 포함됩니다.

  1. componentWillUnmount () : 이 메서드가 호출되면 구성 요소가 DOM에서 영구적으로 제거됩니다.이 방법에서는 와이ou는 이벤트 리스너 제거, 타이머 중지 등과 같은 정리 관련 작업을 수행 할 수 있습니다.

다음은 전체 라이프 사이클 다이어그램입니다.

이것으로 React Components에 대한 블로그의 끝으로 이동합니다. 이 블로그에서 React Components가 무엇인지, 어떻게 사용되는지 명확하게 설명 할 수 있었기를 바랍니다. 내 블로그를 참조 할 수 있습니다. , ReactJS에 대해 더 자세히 알고 싶은 경우.

React에 대한 교육을 받고 흥미로운 UI를 직접 개발하고 싶다면 전 세계에 250,000 명 이상의 만족 한 학습자 네트워크를 보유한 신뢰할 수있는 온라인 학습 회사 인 Edureka에서 작성했습니다.

질문이 있으십니까? 의견란에 언급 해 주시면 연락 드리겠습니다.