개시하다

이번에는 ARO 함수에 대한 내용을 쓰겠습니다.

시리즈

이 기사는 리액트 기초 강좌를 위해 연재된 것이다.마음에 드는 사람을 위해 지난 장은 다음과 같다.
JSX의 내용을 React로 렌더링(create-react-app)(React 기초 강좌 1)-Qita

JSX에서 변수를 사용하려는 경우

변수 컨텐트를 확장하려면 파괄호(블레이드)｛ ｝로 묶어 확장합니다.

const greeting = "Hello, React"; // 変数代入
const jsx = <h1>{greeting}</h1>; // 変数の中身を展開

JSX에서 라벨로 묶어요.

따라서 다음은 잘못된 것이다.

const greeting = "Hello, React";
const introduction = "My Name is JS";
const jsx = <h1>{greeting}</h1><p>{introduction}</p>;

오류 메시지는

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

만약 여러 개의 라벨이 있다면, 라벨을 포위할 준비를 하세요.그럼 div 라벨로 둘러보세요.
index.js

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

const greeting = "Hello, React";
const introduction = "My Name is JS";
const jsx = (
  <div>
    <h1>{greeting}</h1>
    <p>{introduction}</p>
  </div>
);

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

이렇게 하면 착오가 생기지 않을 것이다.

JSX에서 함수를 사용하려는 경우

전개 방법은 변수와 같다.이번에는 JS가 최초로 정의한 Date 등급의 함수를 사용해 보았다.

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

// 今日の日付で Date オブジェクトを作成
let now = new Date();

const greeting = "Hello, React";
const introduction = "My Name is JS";
const jsx = (
  <div>
    <h1>{greeting}</h1>
    <p>{introduction}</p>
    <p>This Year is {now.getFullYear()}</p>
  </div>
);

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

올해의 연호가 펼쳐졌네요.파괄호(칼날)｛ ｝로 묶으면 변수뿐만 아니라 함수와 대상도 사용할 수 있다.

Arro 함수로 정의된 컨텐트를 표시하려면

나는 문자열과 함께 오늘의 연호를 되돌려 주는 함수를 정의해 보았다.

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

// 文字列とセットで今日の年号を返すアロー関数
const returnThisYear = () => {
  // 今日の日付で Date オブジェクトを作成
  let now = new Date();
  return `This Year is ${now.getFullYear()}`
}

const greeting = "Hello, React";
const introduction = "My Name is JS";
const jsx = (
  <div>
    <h1>{greeting}</h1>
    <p>{introduction}</p>
    <p>{returnThisYear()}</p>
  </div>
);

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

짖을 때도 이번에는 칼날로 둘러쌌다.{returnThisYear()}내 생각에는 정확하게 불려나온 것 같다.

함수 이름

Arro - 함수는 ES 2015(ES6) 이후에 생성되는 함수를 정의하는 구문입니다.this의 행동이 쉽게 통제되는 등 장점이 이용된다.

구문

우리 이전 함수의 정의를 비교해 봅시다.이 두 함수는 모두 문자열을 되돌려 주는 간단한 함수다.

// 昔の関数
const mukashi_func = function() {
  return "昔の関数"
}
console.log(mukashi_func);
// => function mukashi_func() {}
// =>   <constructor>: "Function"
// =>     name: "Function"

// アロー関数
const arrow_func = () => {
  return "アロー関数"
}
console.log(arrow_func);
// => function arrow_func() {}
// =>   <constructor>: "Function"
// =>     name: "Function"

aro 함수를 통해 매개 변수를 전달할 때

const arrow_func = (param) => {
  console.log(param)
}
arrow_func('test');

// => test 

매개변수가 있으면 괄호를 생략할 수 있습니다.

const arrow_func = param => {
  console.log(param)
}
arrow_func('test');

// => test 

매개변수가 2개인 경우에는 생략할 수 없습니다().

const arrow_func = (param1, param2) => {
  console.log(param1, param2);
};
arrow_func('first', 'second' )

// => first second

1 쓰기 전용

const arrow_func = () => {
  console.log("one line");
}

arrow_func();

// => one line

위에 return만 썼기 때문에 아래와 같은 줄로 쓸 수 있습니다.

const arrow_func = () => console.log("one line");
arrow_func();

// => one line

Arro-함수에 대한 다양한 쓰기 방법(생략 형식)을 소개했다.

React에서 aro 함수 사용

Arro 함수로 얻어진 매개변수를 성형하고 render()의 JSX에 다시 쓰기 위해 2개의 매개변수를 교차합니다.

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

const arrow_func = (no, name) => {
  return `no is ${no}, name is ${name}`
}

render(arrow_func(1,'taro'), document.getElementById("root"));

참고 자료

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