React: 간단한 소개

Angular 및 AngularJ에 대해 듣는 것이 지겹습니까? 내가 당신을 위한 해결책이 있습니까! 소개: 반응! React는 Angular에서 개선이 필요한 부분을 중심으로 구축된 프레임워크입니다.

2013년 Facebook에서 만든 React는 재사용 가능하고 간단한 인터페이스를 구축할 목적으로 개발되었습니다. React는 소프트웨어 개발 회사에서 구현되는 주요 프레임워크이기도 합니다. Angular JS에 대한 이점은 React가 파일 주위에 속성을 전달하기가 더 쉽다는 것입니다.

이 프레임워크를 사용할 때 염두에 두어야 할 몇 가지 주요 개념이 있습니다.

1. 구성품
2. 상태
3. 소품
4. JSX

구성품

React 인터페이스는 DOM(Document Object Model)으로 렌더링되는 한 가지 작업을 수행하는 구성 요소로 구성됩니다. 이러한 구성 요소는 HTML로 작성된 다음 DOM에 추가됩니다. 구성 요소는 클래스 또는 기능의 두 가지 형태로 전사되는 경향이 있습니다.

class TestObject extends React.Component{
    render(){
        return <h1>Hello!</h1>
    }
}

두 형식의 가장 큰 차이점은 클래스가 "상태"라는 것을 보유할 수 있다는 것입니다. 상태는 매개변수로 생각할 수 있습니다. 이를 통해 구성 요소를 동적으로 만들 수 있습니다. 기능 구성 요소는 상태를 유지할 수 없습니다.

function testObject() {
    return <h1> Hello! </h1>
}

상태

상태는 클래스 구성 요소에 대한 개체를 참조합니다. 사용자 또는 API 키로 로드할 수 있습니다. 상태는 "props"를 통해 전달됩니다. 이 프레임워크를 계층 구조로 생각하십시오. 소품을 전달하기 위한 추가 단계를 건너뛰려면 구성 요소가 토템 기둥에서 높아야 합니다.

상태는 전달될 수만 있고 측면은 전달되지 않습니다. 상태가 변경될 때마다 구성 요소와 해당 자식도 변경됩니다.

class TestObject extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          isTrue: false,
       };
    }
 }

소품

동적 요소를 생성하기 위해 구성 요소 간에 소품이 전달됩니다. 소품은 연장자가 각 구성 요소에 제공하는 개체입니다. 소품을 사용하여 동적 및 고정되지 않은 데이터를 렌더링할 수 있습니다.

자녀와 부모가 많은 이유는 전체 문제를 작은 배치로 공격할 수 있는 능력입니다. 우리는 작은 구성 요소를 사용하고 싶습니다. 하나의 큰 구성 요소를 사용하면 가독성이 끔찍할 것입니다. 특히 특정 소품을 사용하여 특정 부분을 렌더링하려는 경우. 그 작은 부분에 대한 전체 구성 요소를 다시 렌더링해야 합니다!

const customerData = props => {
    return (
       <div>
          <p>Name: {props.fullName}</p>
          <p>age: {props.age}</p>
          <p>email: {props.email}</p>
       </div>
    );
 };

JSX

JSX는 JavaScript의 날개로 간주됩니다. JSX는 사용자 인터페이스가 어떤 모습일지 알려줍니다. 이것은 React 프레임워크 내에서 사용자 인터페이스와 로직을 생성할 수 있는 컨트롤을 제공합니다. 이것을 구현할 때 Javascript 사고 방식을 UI에 직접 포함할 수 있습니다.

const testName = 'Larry';
const testObj = {
    height: `5'10"`,
    age: '25',
    sign: 'scorpio'
}
const element = <h1>My name is {name} and my stats: {testObj}</h1>; 

결론

요약하자면 React는 매우 유용한 프레임워크입니다. 그것은 우리가 큰 문제를 극복하기 위해 소량으로 구성 요소를 만들 수 있습니다. "전달된"유형 계층의 props를 사용하여 서로 다른 유형 속성이 한 파일에서 다른 파일로 엮이는 것을 허용할 수 있습니다. 전체적으로 React는 속성을 상호 연결하는 원활한 방법을 형성합니다!

이 작은 블로그가 반응과 그 작동을 더 잘 이해하는 데 도움이 되었기를 바랍니다. 업데이트된 React Hooks에 대한 블로그를 계속 지켜봐 주세요.