React를 이해하는 데 가장 중요한 개념은 구성 요소, 소품, 상태 및 후크입니다.

여기서는 'properties'의 줄임말인 'props'에 대해 설명하겠습니다. 소품은 Component 함수의 매개변수로 액세스됩니다. 종종 코드를 더 깔끔하게 유지하기 위해 구조가 해체됩니다.

프로젝트 계층 구조에서 구성 요소를 가져오고 내보내는 방법을 알고 있다고 가정하겠습니다. 그렇지 않은 경우 create-react-appdocs을 확인할 수 있습니다.

//in the App.js file you would render the prop:

<Hello person={benjamin} />

//and in the Hello.js file, the person prop would be passed down:

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

//which would ouput:

<h1>Hello, benjamin</h1>

//alternatively, you could destructure the prop for cleaner code:

function Hello({props}) {
return <h1> Hello,{person}</h1>
}

소품은 필요한 만큼 가질 수 있습니다. 예를 들어:

function Weather ({temperature, day} {
return <h2> It will be {temperature} degrees on {day}</h2>
}

<Weather temperature='84' day='Tuesday' />

//Which results in:

<h2> It will be 84 degrees on Tuesday </h2>

클래스 구성 요소

불필요하게 장황하기 때문에 개발자들이 클래스 기반 구성 요소에서 멀어지고 있는 것 같습니다. 그러나 여전히 클래스 구성 요소를 사용하는 경우 프로세스는 매우 유사하지만 this.props 대신 props를 추가해야 합니다.

예를 들어:

import { Component } from 'react'

class Greeting extends Component {
  render() {
    return <p>Hello, {this.props.who}!</p>;
  }
}

소품 유형

소품은 문자열, 숫자, 객체, 배열, 부울, 변수, 함수 참조를 포함한 모든 값을 가질 수 있습니다.

문자열 리터럴:

<Component prop='this is a string'>

템플릿 리터럴:

<Component prop={`this is a string with a ${variable}`}

숫자 리터럴:

<Component prop={14} />

부울 리터럴:

<Component prop={true} /}

객체 리터럴:

<Component pro={{property : 'value'}} />

배열 리터럴:

<Component prop={['item 1','item 2']} />

JSX

<Component prop={Message who='Batman' />} />

변수 또는 함수 참조

<Component prop={functionReference} />