React의 특징 2

React에서 이벤트 및 스타일을 맞추는 방법

HTML 태그에 이벤트를 할당하려면
이벤트 이름을 camelCase로 명명하고 이벤트 핸들러에 함수를 전달합니다.

style을 할당하는 것은 DOM내에 직접 기술하는 방법이나, CSS프로퍼티를 일단 변수에 대입하고 나서 호출하는 방법등이 있다. 변수명도 이벤트명과 같이 camelCase로 정의할 필요가 있다.
오브젝트 리터럴(=JavaScript에서는 {}로 둘러싸는 것으로 오브젝트화가 가능)를 사용해 기술하는 경우가 많다.

button 태그에 이벤트와 스타일을 할당하는 예

import React from 'react'

const App = () => {
  //　関数の定義
  const onClickButton = () => {
    alert('Clicked!');
  }
  // CSSプロパティを変数へ代入
  const buttonStyle = {
    color: "white",
    lineHeight: "50px",
    width: "70px",
    height: "70px",
    background: "linear-gradient(135deg, #427eff 0%, #f13f79 70%)",
    borderRadius: "50%",
    border: "white"
  };
  return (
    <React.Fragment>
      <button onClick={onClickButton} style={buttonStyle}>
        ええやん
      </button>
    </React.Fragment>
  );
};

props

props란 부모 컴퍼넌트로부터 아이 컴퍼넌트에 건네주는 인수와 같은 것.
　→다양한 시츄에이션으로의 사용 주름이 가능하게 된다!

// 親コンポーネント
import React from "react";
import ReactDom from "react-dom";
import { Child } from "./Child";

const Parent = () => {
  return <Child name={"範馬刃牙"} age={18} />;
};

export default Parent;
ReactDom.render(<Parent />, document.getElementById("root"));

// 結果
// こんにちは！私の名前は範馬刃牙。現在、18歳です。

// 子コンポーネント
import React from "react";

export const Child = (props) => {
  return (
    <p>
      こんにちは！私の名前は{props.name}。現在、{props.age}歳です。
    </p>
  );
};

부모 컴퍼넌트로부터 건네받은 props(인수)의 내용은 오브젝트가 되어 있다.
따라서, {props.name} {props.age} 와 같이 프로퍼티명을 지정하는 것으로, 그 값을 취득할 수 있다.
코드를 깔끔하게 하기 위해서, 이하와 같이 ES6의 분할 대입로 쓰는 것이 일반적.

분할 대입을 사용한 경우

// 子コンポーネント
import React from "react";

// 引数のpropsの部分を分割代入で指定する
export const Child = ({ name, age }) => {
  return (
    <p>
      こんにちは！私の名前は{name}。現在、{age}歳です。
    </p>
  );
};

state

state란 각 컴퍼넌트내에서 취급하는 변수를 격납·갱신할 수 있는 구조이다.
props가 불변의 데이터(=사전에 외부 컴퍼넌트로부터 건네진 정보 밖에 출력할 수 없는 구조)인 것에 대해, state는 다양한 조건에 따라 동적으로 변화하는 가변의 데이터를 취급한다.

다음은 React의 내장 후크 useState를 사용한 예const [stateの変数名, stateを更新するための関数名] = useState(初期値);
Congrats.jsx

import React, { useState } from "react";

export const Congrats = () => {
  // useStateから配列の分割代入で①stateの変数名　②stateを変更するための関数名を設定。
  const [num, setNum] = useState(0);
  const [crackerShowFlag, setCrackerShowFlag] = useState(false);
  const onClickCountUp = () => setNum(num + 1);

  // 変数numの値に応じて、crackerShowFlagの真偽値を更新する
  if (num > 0) {
    if (num % 10 === 0) {
      crackerShowFlag || setCrackerShowFlag(true);
    } else {
      crackerShowFlag && setCrackerShowFlag(false);
    }
  }

  const buttonStyle = {
    color: "white",
    lineHeight: "50px",
    width: "70px",
    height: "70px",
    background: "linear-gradient(135deg, #427eff 0%, #f13f79 70%)",
    borderRadius: "50%",
    border: "white"
  };

  return (
    <React.Fragment>
      <button onClick={onClickCountUp} style={buttonStyle}>
        ええやん
      </button>
      <div>
        {num}👏
        {crackerShowFlag && <span>🎉🎉🎉</span>}
      </div>
    </React.Fragment>
  );
};

index.js

import React from "react";
import ReactDom from "react-dom";
import { Congrats } from "./Congrats";

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

결과

지난번 기사:React의 특징 그 1