📝 今日作った

react rendering

📖 学習資料

反作用文書

📚 学識

新しい知識や理解しにくい部分だけを整理する

1.JSX概要

1）XSS攻撃防止

[HTTP/セキュリティ]サイト間スクリプト攻撃(XSS:Cross-site Scripting Attacks)を参照XSS(cross-site-scripting) 공격とは、Webサイト以外の管理者が悪意のあるスクリプトをWebページに挿入することを意味します.
しかし、基本的にREACT DOMはJSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프です.(スケートをする参照)
したがって、アプリケーションが明確に作成されていないコンテンツは挿入できません.
言い換えれば、JSXに挿入されたすべての値はレンダリング前に文字列に変換されるため、悪意のあるスクリプトを挿入したXSS攻撃を防止することができる.

2. JSXについて

1)propのデフォルト値は「true」

<MyTextBox autocomplete />

// 위와 아래는 같은 표현이다.
// 일반적으로 prop에 값을 전달하는 것을 권장한다. ES6 문법과 헷갈릴 수 있기 때문이다.

<MyTextBox autocomplete={true} />

2)展開属性-展開演算子(...)使用

HEAD素子が既に使用する支柱のオブジェクトを持っている場合、展開演算子(展開演算子)を使用して、オブジェクト全体をサブ素子(つまりHEAD素子グループ)に直接渡すことができます.

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

// 위와 아래는 같은 표현이다.

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

HEAD素子では、HEAD素子が使用する特定の支柱を選択し、残りの支柱は展開演算子によって伝達されます.これにより、HEAD素子を有用に再利用することができる.

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

3）関数を子として使用する

通常、JSXに挿入されたJavaScript式は、文字列またはreact要素またはそれらの配列に換算されます.
ただし、props.childrenも他のアイテムのようにReactでレンダリング可能なデータの形式(onClickイベントリスナー関数をスキップするように)だけでなく、어떤 형태의 데이터도 넘겨질 수 있다.です.
次の例ではpropsです.childrenでコールバックを受けることで、重複する素子を生成しています.

function Repeat(props) {
  // console.log(props); => {numTimes: 10, children: ƒ}

  let items = [];

  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }

  return <div>{items}</div>; {/* React element들의 배열을 반환한다 */}
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>} {/* props.children */}
    </Repeat>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<ListOfTenThings />, root);

4)条件付きレンダリング

reactはレンダリングされるので、0に示すfalse値に注意してください.

const falsy = 0;
const SomeComponent = () => <p>I am something else.</p>;
const Article = () => (
  <div className="something">
    {true && <SomeComponent />} {/* 브라우저에 <SomeComponent /> 가 렌더링됨 */}
    {false && <SomeComponent />} {/* 브라우저에 아무것도 렌더링되지 않음 */}
    {falsy && <SomeComponent />} {/* 브라우저에 0이 렌더링됨 */}
  </div>
);

const root = document.getElementById("root");
ReactDOM.render(<Article />, root);

cf.true、false、undefinedなどの値を出力する場合は、String(false)のように文字列に変換する必要があります.

3. コンポーネントとProps

1)propsは読み取り専用です。

各react素子は、自分のpropsを処理する際に純粋な関数のように動作しなければならない.
素子関数の内部では、パラメータ形式で受信したprops値を変更するべきではありません.

2）抽出部品

UIの一部が複数回使用されている場合、または(Button、Panel、Avatar)UIの一部自体が複雑である場合(App、FeedStory、Comment)は、個別のコンポーネントとして作成することが望ましい.

props

function Img(props) { // props.user === { avatarUrl: "...", name: "..." }
  return (
    <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} />
  );
}

function UserInfo(props) { // props.user === { avatarUrl: "...", name: "..." }
  return (
    <div className="UserInfo">
      <Img user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) { // props === { author: "...", text: "...", date: ... }
  const formatDate = (date) => date + "시";

  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function App() {
  const author = {
    name: "Syong",
    avatarUrl: "https://t1.daumcdn.net/cfile/tistory/24283C3858F778CA2E",
  };

  return (
    <div>
      <Comment author={author} text="댕댕이입니다" date={new Date().getHours()} />
    </div>
  );
};

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

ES 6構造分解割当

function UserInfo({user}) { // // props.user === { avatarUrl: "...", name: "..." }
  return (
    <div className="UserInfo">
      <Img user={user} />
      <div className="UserInfo-name">
        {user.name}
      </div>
    </div>
  );
}

function Img({user}) { // props.user === { avatarUrl: "...", name: "..." }
  return (
    <img className="Avatar" src={user.avatarUrl} alt={user.name} />
  );
}

function Comment({author, text, date}) { // props === { author: "...", text: "...", date: "..." }
  const formatDate = (date) => date + "시";

  return (
    <div className="Comment">
      <UserInfo user={author} />
      <div className="Comment-text">
        {text}
      </div>
      <div className="Comment-date">
        {formatDate(date)}
      </div>
    </div>
  );
}

function App() {
  const author = {
    name: "Syong",
    avatarUrl: "https://t1.daumcdn.net/cfile/tistory/24283C3858F778CA2E",
  };

  return (
    <div>
      <Comment author={author} text="댕댕이입니다" date={new Date().getHours()} />
    </div>
  );
};

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

明日作った

react state