개시하다

이번에 쓴 것은 React Component에 관한 것입니다.

시리즈

이 기사는 리액트 기초 강좌를 위해 연재된 것이다.마음에 드는 사람을 위해 지난 장은 다음과 같다.
JSX에서 변수 또는 Arrow 함수(React 기초 강좌 2)를 펼치고 싶은 정보 - Qiita
첫 문장은 다음과 같다.
JSX의 내용을 React로 렌더링(create-react-app)(React 기초 강좌 1)-Qita

구성 요소

포트의 개념은 함수와 비슷하다.즉 input이 있어 어떤 처리를 한 결과인지 Output이 만든 부품과 부품을 어셈블리라고 한다.그리고 이 구성 요소를 조합해서 더 큰 응용 프로그램을 만듭니다.

구문

먼저 일반적인 React Element을 만든 다음 React Component를 만듭니다.

React Element

import React from "react";
import { render } from "react-dom";

const returnTxt = () => {
  return <p>sample txt</p>;
};

render(returnTxt(), document.getElementById("root"));

그럼 제가 React Component로 이걸 써볼게요.

React Component

정의할 때는 몇 가지 규칙이 있다.

const로 선언하거나 렌더의 첫 번째 인자인 JSX로 전송할 때 문장을 대문자로

render의 첫 번째 매개 변수인 JSX를 교부할 때 라벨로 둘러싸기(폐쇄 라벨도 쓰기) 예: <Tag />

import React from "react";
import { render } from "react-dom";

const ReturnTxt = () => {
  return <p>sample txt</p>;
};

render(<ReturnTxt />, document.getElementById("root"));

결과는 같지만 제작React Component한 곳은 다르다.
그럼, 계속해서 이야기해 봅시다. React Component 어떤 가격을 드릴까요?
이 경우 렌더의 첫 번째 매개 변수인 JSX에서 key="value"의 감각방향React Component으로 매개 변수의 값을 교부한다.
index.js

import React from "react";
import { render } from "react-dom";

const ReturnTxt = props => {
  return <h1>{props.title}</h1>;
};

render(<ReturnTxt title="My Blog" />, document.getElementById("root"));

여러 매개변수를 교차할 수도 있습니다.
index.js

import React from "react";
import { render } from "react-dom";

const ReturnTxt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.body}</p>
    </div>
  );
};

render(
  <ReturnTxt title="My Blog" body="hello, world" />,
  document.getElementById("root")
);

React Component 중 props의 내용을 살펴봅시다.

console.log(props)

콘솔 출력은 다음과 같습니다.

Object {title: "My Blog", body: "hello, world"}
    title: "My Blog"
    body: "hello, world"

title와 body에 수치를 대입했다.props로는 수용 이외의 수용 방법도 있다.코드부터 쓸게요.
index.js

import React from "react";
import { render } from "react-dom";

const ReturnTxt = ({title, body}) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{body}</p>
    </div>
  );
};

render(
  <ReturnTxt title="My Blog" body="hello, world" />,
  document.getElementById("root")
);

다른 점이 있다면 바로 Arror 함수 매개 변수를 받는 부분에 파괄호(Breas)｛ ｝로 받고, 이번에는 title와body의 변수에 대상 내용을 넣어 직접 이 변수명으로 펼치는 것이다.props에 적는 것보다 위에 적힌 것처럼 뭘 받았는지 아는 게 좋을 것 같아요.

참고 자료

개정 새 JavaScript 정식 입문 ~ 현대적인 스타일을 바탕으로 현장에서의 응용 | 산전상관