프로그래밍에서 ReactJs 구성 요소 유형

ReactJ의 구성 요소는 무엇입니까?

컴포넌트는 기본적으로 React의 기본 단위 및 빌딩 블록을 참조합니다. 이해를 쉽게 하기 위해 세상의 모든 것이 원자로 구성되어 있는 것처럼 구성 요소는 ReactJS의 구성 요소일 뿐입니다. ReactJS를 사용하여 개발 중인 모든 응용 프로그램이나 웹 사이트는 구성 요소라고 하는 다른 단위로 구성됩니다.

위의 이미지에서 웹 사이트의 UI에서 여러 구성 요소를 찾을 수 있습니다. 메뉴 모음은 하나의 구성 요소이고 왼쪽 추천 열은 다른 구성 요소입니다. 쿠키 상자도 구성 요소이며 모든 정보를 제공하는 본체는 또 다른 구성 요소입니다. 따라서 전체 UI는 웹 사이트를 우리에게 유용하게 만들기 위해 다양한 구성 요소로 구성됩니다. 따라서 웹 사이트의 UI는 상위 구성 요소로 간주될 수 있습니다.

프로그래밍에서 ReactJs 구성 요소 유형

1. 기능적 구성요소

기능적 컴포넌트는 자바스크립트 함수를 작성하는 것만으로 간단하게 생성할 수 있습니다. 구체적으로 말하면 기능 구성 요소는 Props를 가져와 JSX를 반환하는 기능입니다. 기능 구성 요소는 매개변수 형식으로 데이터를 수신하거나 수신하지 못할 수 있습니다. 또한 기능 구성 요소에는 수명 주기 메서드나 상태가 없지만 단순히 React Hooks를 구현하여 추가할 수 있습니다. 기능 구성 요소는 항상 디버그, 읽기 및 테스트하기 쉽습니다.

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

위의 코드 이미지에서 상수 변수 "Hello Emizen"을 전달하는 간단한 컴포넌트입니다. 상수 변수는 JSX를 반환하는 화살표 함수에 할당됩니다. 기능 구성 요소는 화살표 함수일 필요가 없으며 일반 JavaScript 함수로 간단히 선언할 수도 있습니다. 동시에 Props도 함수로 전달되어 JSX 코드에서 데이터를 렌더링하는 데 사용할 수 있습니다.

2. 클래스 구성 요소

Class 구성 요소는 모든 유형 중에서 가장 많이 사용되는 구성 요소입니다. 그 이유는 클래스 컴포넌트가 기능적 컴포넌트의 모든 기능을 수행함과 동시에 몇 가지 추가 기능을 수행할 수 있는 능력이 있기 때문입니다. React, props, state 및 lifecycle 메소드의 주요 기능도 효율적으로 사용할 수 있습니다. 그러나 클래스 구성 요소는 기능 구성 요소에 비해 비교적 복잡합니다. 데이터는 한 클래스 구성 요소에서 다른 클래스 구성 요소로 매우 쉽게 전달할 수 있습니다.

 // 클래스 컴포넌트 예제 import React from 'react';class HelloWorld extends React.Component {
   렌더링() {
      반품 (
         <div>
            <p>안녕하세요 에미젠!</p>
         </div>
      )
   }
}기본 HelloEmize 내보내기;

위의 예제에서 클래스 컴포넌트가 Hello Emizen 클래스 이후에 extends React.Component 를 사용하는 것을 관찰할 수 있습니다. 그런 다음 JSX 코드를 반환하기 위해 render() 메서드도 필요합니다. 클래스 컴포넌트에서 상태를 선언하고 자바스크립트 객체로 설정하고 props 를 사용하여 초기 단계에 있게 하고 라이프사이클 메소드에서 상태를 변경할 수 있습니다. 기능 구성 요소에서 이러한 작업을 수행하려면 React Hooks가 필요합니다.

3. 순수 성분

순수 컴포넌트는 누군가가 작성할 수 있는 가장 간단하고 빠른 컴포넌트입니다. 순수 구성 요소는 범위를 벗어난 다른 변수의 상태를 수정하거나 의존하지 않기 때문에 간단한 기능 구성 요소를 쉽게 대체할 수 있습니다. 단순히 렌더링 기능을 반환하는 구성 요소는 순수 구성 요소에 가장 적합합니다. Pure 구성 요소의 가장 큰 사용 사례는 최적화를 제공하는 것입니다.

React.Component 와 React.PureComponent 의 가장 큰 차이점은 순수 구성 요소가 상태 변경에 대해 얕은 비교 를 나타낸다는 것입니다. 순수 구성 요소는 shouldComponentUpdate() 를 자동으로 관리합니다.

React 구성 요소는 주로 다음과 같은 경우 다시 렌더링됩니다.

• setState() 가 호출됩니다.
• forceUpdate() 가 호출됩니다.
• props 값이 업데이트되었습니다.

4. 고차 컴포넌트

HOC라고도 하는 고차 구성 요소는 React 구성 요소와 비슷하고 React의 구성 특성의 결과인 패턴과 비슷합니다. HOC의 주요 사용 사례는 논리를 다른 구성 요소와 공유하는 것입니다.

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

위의 코드 이미지는 상위 레벨의 컴포넌트를 설명하기 위한 간단한 컴포넌트를 가지고 있습니다. 여기서 핵심 코드는 this.props.myArray.map((element) => (<MyComponent />) 입니다. 이 함수는 구성 요소를 반환합니다. 구성 요소의 수는 단순히 HOC라고 하는 배열의 요소 수에 따라 다릅니다. 이 함수는 상태에서 배열을 가져오므로 모든 요소를 ​​React 구성 요소로 변환하여 배열의 각 요소를 매핑합니다.

다음은 고차 구성 요소 단순 런다운입니다.

1. props 또는 state에서 데이터 가져오기
2. 배열을 매핑하고 모든 요소에 대해 Reach 구성 요소를 반환합니다.

ReactJs 구성 요소를 렌더링하는 방법?

다음 단계에 따라 ReactJS 구성 요소를 렌더링할 수 있습니다.

• 먼저 React.Component 를 확장하는 동일한 이름으로 ES6 클래스가 생성됩니다.
• render() 로 알려진 단일 빈 메서드가 추가됩니다.
• 함수의 본문이 render() 메서드로 이동됩니다.
• render() 본문에서 props 를 this.props 로 교체합니다.
• 결국 나머지 빈 함수 선언을 삭제합니다.

반응 중첩 구성 요소

React의 가장 좋은 점 중 하나는 구성 요소가 서로 중첩될 수 있다는 것입니다. 이 기능은 복잡한 사용자 인터페이스를 만드는 데 크게 도움이 됩니다. 여기에서 자식 구성 요소는 부모 구성 요소 안에 중첩됩니다. 구성 요소가 서로 중첩되는 것을 내부 및 외부라고 합니다.

• 내보내기 : 특정 모듈이나 파일을 내보내서 다른 모듈에서 사용하는 경우 내보내기라고 합니다.
• 가져오기 : 특정 모듈이나 파일을 가져와 기존 모듈에 사용할 때 가져오기라고 합니다.

React 컴포넌트 라이프사이클

React 웹 앱은 기본적으로 독립적이고 상호 작용을 기반으로 실행되는 다양한 구성 요소의 모음입니다. 이러한 각 구성 요소에는 고유한 수명 주기가 있습니다. 수명 주기는 구성 요소 존재의 여러 단계에서 다시 호출하는 일련의 메서드를 나타냅니다.

모든 React 구성 요소에는 기본적으로 다음 세 단계가 있습니다.

1. 장착

구성 요소의 초기화가 완료되면 구성 요소가 DOM에 탑재되고 웹 페이지에 렌더링됩니다. 여기서 React는 미리 정의된 함수의 Naming Conventions에 대해서만 기본 절차를 따릅니다. "Will"이 포함된 기능은 특정 단계 이전을 나타냅니다. 마찬가지로 "Did"가 포함된 함수는 단계가 완료된 후를 나타냅니다. 구성 요소의 장착 단계는 다음 두 가지 기능으로 구성됩니다.

• componentWillMount() 함수 : 이 함수는 컴포넌트가 DOM에 마운트되기 전에 호출됩니다.
• componentDidMount() 함수 : 이전 함수와 반대로 DOM에 컴포넌트가 마운트된 후 호출되는 함수입니다.

2. 업데이트

업데이트는 기본적으로 구성 요소의 상태 및 props가 업데이트된 후 키 누르기, 마우스 클릭 등과 같은 사용자의 이벤트 또는 명령이 업데이트되는 단계입니다. 활성 웹 페이지가 필요에 따라 동작하도록 도와줍니다. 사용자의 명령.

3. 마운트 해제

구성 요소 수명 주기의 완료 단계입니다. 이 단계에서 구성 요소는 DOM에서 마운트 해제됩니다. 다음 함수는 이 함수의 유일한 멤버입니다.

componentWillUnmount() 함수 : 컴포넌트가 DOM에서 완전히 마운트 해제되기 직전에 함수가 호출됩니다. 구성 요소가 페이지에서 제거되기 전에 발생하므로 수명 주기가 종료됩니다.

이 게시물이 React 구성 요소의 유형과 사용 방법에 대한 기본 아이디어를 제공했기를 바랍니다. Emizentech는 웹, 네이티브 및 하이브리드 모바일 앱을 개발하는 선도적인 앱 개발 회사입니다. 따라서 전문 ReactJ 개발자가 필요한 경우 저희에게 연락하십시오.