[React & Express] 04 JSX 실습, extends React.Component ,PropTypes , this.props.children 실습하기

https://legacy.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapperd

Typechecking With PropTypes – React

 

[React & Express] 04 JSX 실습, extends React.Component ,PropTypes

 

App.js

import "./styles.css";

import React from "react";

export default function App() {

return (

<div className="App">

<h1>Hello CodeSandbox</h1>

<h2>Start editing to see some magic happen!</h2>

<Codelab />

</div>

);

}

class Codelab extends React.Component {

render() {

return (

<div> Codelab </div>

);

}

}

index.js

import { StrictMode } from "react";

import { createRoot } from "react-dom/client";

import Codelab from "./App";

const rootElement = document.getElementById("root");

const root = createRoot(rootElement);

root.render(

<StrictMode>

<Codelab />

</StrictMode>

);

코드 설명:

 

1. `import React from "react";` : React 모듈을 불러옵니다. 이 모듈은 JSX 문법을 해석하고, 컴포넌트를 만들기 위해 필요한 기능들을 제공합니다.

2. `<div className="App">` : className 속성을 사용해서 CSS 클래스를 추가한 div 엘리먼트를 선언합니다. 이 엘리먼트는 App 컴포넌트의 루트 역할을 합니다.

3. `<h1>Hello CodeSandbox</h1>` : h1 엘리먼트를 사용해서 "Hello CodeSandbox"라는 텍스트를 화면에 출력합니다.

4. `<h2>Start editing to see some magic happen!</h2>` : h2 엘리먼트를 사용해서 설명을 추가합니다.

5. `<Codelab />` : Codelab 컴포넌트를 호출합니다. 이때 Codelab 컴포넌트는 App 컴포넌트의 자식 컴포넌트로서 호출되는 구조입니다.

6. `class Codelab extends React.Component { ... }` : Codelab 컴포넌트를 클래스 형태로 정의합니다.

7. `<div>Codelab</div>` : div 엘리먼트를 사용해서 "Codelab"이라는 텍스트를 출력합니다. 이것이 Codelab 컴포넌트에서 렌더링되는 내용입니다.

8. `const rootElement = document.getElementById("root");` : index.html 파일에서 root 엘리먼트를 가져옵니다.

9. `const root = createRoot(rootElement);` : CreateRoot API를 사용해서 root 렌더 요소를 생성합니다.

10. `<StrictMode>...</StrictMode>` : React에서 제공하는 태그 중 하나인 StrictMode를 사용하면, 예상치 못한 사이드 이펙트가 발생할 가능성이 있는 코드를 빠르게 감지할 수 있습니다.

11. `<Codelab />` : Codelab 컴포넌트를 렌더링합니다. 이때 React.StrictMode 아래에서 호출되는 구조입니다.

 

---

추가 Html변경해서 

let text = 'hi I Codelab';

을 추가한다면,

 

추가 App.js

class Codelab extends React.Component {

render() {

let text = 'hi I Codelab';

return (

<div> {text} </div>

);

}

}

 

변경후 html,

 

hi i Codelab 배경색 추가하는 방법,

 

class Codelab extends React.Component {

render() {

let text = 'hi I Codelab';

let style = {

backgroundColor: 'aqua'

};

return (

<div style={style}> {text} </div>

);

}

}

 

주석을 달려면 <div> 태그 안에 달아야된다.

 

오류그림

 

수정그림,

 

 

---

 

PropTypes,

공식문서를 읽어보자,

https://legacy.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapperd

Typechecking With PropTypes – React

optionalArray: prop으로 전달받을 값이 배열인 경우, PropTypes.array로 지정합니다.
optionalBool: prop으로 전달받을 값이 불리언인 경우, PropTypes.bool로 지정합니다.
optionalFunc: prop으로 전달받을 값이 함수인 경우, PropTypes.func로 지정합니다.
optionalNumber: prop으로 전달받을 값이 숫자인 경우, PropTypes.number로 지정합니다.
optionalObject: prop으로 전달받을 값이 객체인 경우, PropTypes.object로 지정합니다.
optionalString: prop으로 전달받을 값이 문자열인 경우, PropTypes.string로 지정합니다.
optionalSymbol: prop으로 전달받을 값이 심볼인 경우, PropTypes.symbol로 지정합니다.
이러한 PropTypes를 이용하여 컴포넌트에 전달되는 prop의 타입을 검증하고, 잘못된 타입이 전달될 경우 콘솔에 경고 

메시지를 출력함으로써 버그를 예방할 수 있습니다.

 

PropTypes를 추가하려면 다음과 같이 내보내기 전에 별도의 함수에서 구성 요소를 선언할 수 있습니다.

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

export default HelloWorldComponent

그런 다음 PropTypes를 에 직접 추가할 수 있습니다 HelloWorldComponent.

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent

 

this.props.name 실습하기,

<h1>Hello {this.props.name}</h1>

import "./styles.css";
import React from "react";

class Codelab extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Codelab name="hahaha" />
    </div>
  );
}

 

this.props.children 실습하기

<h1>Hello {this.props.children}</h1>

import "./styles.css";
import React from "react";

class Codelab extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
        <h1>Hello {this.props.children}</h1>
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Codelab name="hahaha"> jajaja.</Codelab>
    </div>
  );
}