React에 대해 공부했기 때문에 그 때의 메모입니다.

JSX 기법

JacaScript 내에 HTML을 쓰는 느낌.

return내가 복수행이면 ()로 둘러싼다.

JSX는 하나의 탭 <>으로 둘러싸인다.

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return(
    <>
     <h1>こんにちは！</h1>
     <p>お元気ですか？</p>
    </>
  );
};

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

구성 요소 사용

화면 요소의 1단위로 1화면으로부터 텍스트 박스 등 크고 작은 다양한.

파일을 분리하여 구성 요소를 분할할 수 있습니다.

읽을 때 import 읽을 때는 export를 사용한다.

React의 컴퍼넌트를 사용하고 있는 경우는 확장자는 jsx로 하면 된다.

컴퍼넌트명은 머리글자는 대문자로 한다.

index.js

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

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

App.jsx

import React from "react"

export const App = () => {
  return(
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか？</p>
    </>
  );
};

React의 이벤트 및 스타일

이벤트

이벤트 이름은 낙타 케이스 (onChange, onClick과 같은 형태)

{}로 둘러싸인 부분이 JavaScript가 되어 함수명등을 넣는다.

import React from "react"

export const App = () => {
  const onClickButton = () => alert()

  return(
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか？</p>
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

스타일

{}에서 객체로 스타일을 작성하는 방법. 그 때 할당하는 값은 문자열로 한다. ※ ①

객체의 변수에 CSS를 정의하고 반영하는 방법. ※ ②

스타일을 맞추는 방법은 그 밖에도 있다.

import React from "react"

export const App = () => {
  const contentStyle = { // ②
    color: 'blue'
    fontSize: '18px'
  };

  return(
    <>
      <h1 style={{ color: 'red' }}>こんにちは！</h1> 　// ①
      <p style={contentStyle}>お元気ですか？</p> // ②
    </>
  );
};

Props

컴퍼넌트에게 건네지는 인수와 같은 것.

동적으로 변경하고 싶은 부분을 props로서 사용한다.

변수 이름과 children으로 값을 전달할 수 있습니다.

건너온 props에 분할 대입하는 것으로 가독성 UP.

예: 스타일로 색상이 지정된 문자를 표시할 경우

components/ColorfulMessage.jsx

import React from "react";

export const ColorfulMessage = (props) => {
  const { color, children } = props;
  const contentStyle = {
    color: color
  };

  return <p style={contentStyle}>{children}</p>;
};

App.jsx

import React from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

export const App = () => {
  return (
    <>
      <ColorfulMessage color="green">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="red">こんにちは</ColorfulMessage>
    </>
  );
};

결과

State

컴퍼넌트가 가지는 상태.

State가 변경되면(자) 재 렌더링 된다.

useState

React에서 state를 다룰 때 사용하는 함수.

const [stateの変数名, stateを変更する関数(setを使う) ] = useState(初期値)

사용법의 예 카운트 업

state에서 초기값을 0으로 설정하고 버튼을 누르면 카운트 업하는 함수를 정의함으로써 카운트 업을 실현할 수 있다.

import React from "react";
import { useState } from "react";

export const App = () => {
  const [num, setNum] = useState(0);

  const onClickCountUp = () => {
    setNum(num + 1);
  };

  return (
    <>
      <button onClick={onClickCountUp}>カウントアップ</button>
      <p>{num}</p>
    </>
  );
};

　재 렌더링

React에서는 state의 변경이 있으면 재렌더링(코드를 또 위에서 실행) 달린다.

재 렌더링은 버그의 원인이 될 수 있다.

useEffect

useEffect를 사용하여 재 렌더링을 방지합니다.

useEffect(() => {
  // 処理
}, [] );

두 번째 인수가 비어 있으면 처리 부분이 처음 렌더링 될 때만 실행됩니다.
제 2 인수에 변수를 설정하면 그 변수를 감시하기 때문에 그 변수의 state가 바뀌었을 때에 실행된다.

사용하는 예로는, API로 기사 일람 페이지를 취득했을 때에 useEffect로 기사 일람 페이지를 취득하는 것은 첫회만으로 설정할 수 있거나 등.

참고