🌱     What I learned Today :)

  ⭐️  React
     - JSX
     - Component
     - state & props
     - Life Cycle

はんのう欄

フェイスブックに作成されたJavaScriptライブラリは、フェイスブックの開発と更新をより容易にするために作成されます.reactはjsx(JavaScriptとDOMを適切に混合して使用する)言語で構成され、1つのコンポーネントはWebを構成する.この反応は完全にフロントエンド開発者向けのライブラリであり,フロントエンド開発者においてすでに有名である.

1.jsxの特性

JSX
  応答でJSXを使用する必要はありませんが、JavascriptコードでUI関連の操作を行うと、視覚的に役立ち、応答がより役立つエラーや警告情報を表示できます.
つまり、JSXの利用は必須ではありません.
JSXの可読性が向上し、効率的に動作します.
JSXの特徴を見てみましょう.
📌  一見HTMLのように見えますが、JavaScriptの拡張文法です.

<header className='App-container'>...</header>

📌  飾りで包まなければなりません.
何もないように見えますが、そうしないと間違います.

[올바른 예제] ----> O

<div>
  <div>
    <h1>hello</h1>
  </div>

  <div>
    <h1>John</h1>
  </div>
</div> 


------

[잘못된 예제] ----> X

  <div>
    <h1>hello</h1>
  </div>

  <div>
    <h1>John</h1>
  </div>

📌  JavaScriptを適用する場合は、{}に記述します.

class App extends Component {
  render() {
    const name = 'Potter'
    return (
      <div>
        hello {name}!  // hello Potter!
      </div>
    );
  }
}

📌  JSX内部でif文は使用できません

--> 삼항연산자 사용 or IIFE 사용
--> JSX 외부에서는 if문 사용 가능

[예제]
  <div>
    {
      (1 + 1) === 2 ? (<h1>정답</h1>):(<h1>탈락</h1>) 
    }
  </div>

📌  Elementのクラス名を適用する場合は「className」を使用します.

  [올바른 예제]

<div className="apple">Hello Potter</div>

  [잘못된 예제]

<div class="No">no!!!</div>  --> 일반 js와는 다르니 꼭 주의할 것!

2. Component

[컴포넌트]

 * 독립적인 단위 모듈
 * 재사용성 O
 * 직관적 O
 * 함수형 컴포넌트
 * Class형 컴포넌트

構成部品(component)は하나의 의미를 가진 독립적인 단위 모듈と定義される.上述したように、これらの独立したユニットモジュールは、次々と集まり、これらの素子でカスタマイズされ、ウェブページを形成する.また、コンポーネントを作成すると、他の場所で繰り返し使用できる独立したモジュールです.
直感的で、これらの要素がどのような役割を果たしているのか、あるいはどのような役割を果たしているのかを一気に見ることができます.
次の写真を見て説明します.

構成部品は関数と見なすことができます.
折り返し車をelementとして見ることができます.
つまり、コンポーネントは1つのファイル単位でモジュール化されています-->export default Appとして再利用可能
構成部品は、関数タイプとタイプの2種類に分けられます.
簡単に見てみましょう

関数構成部品

名前の通り、関数を宣言してjsx言語で構成部品を構築します.
この関数型構成部品の使用範囲はクラス構成部品よりも小さく、通常はステータス更新(ステータス変化)ではなく、基本構成を実現するために使用される構成部品が非常に限られています.

  function Potter() {
    return (
      <div>
        Potter is awesome
      </div>
    );
  }

クラス構成部品

これもclassを使用して作成されたコンポーネントです.関数型ではないことに注意してください.
クラス構成部品は、関数構成部品とともに使用できます.
また、関数素子よりも状態(状態変化)をさらに更新することもできる.
構文構造は次のとおりです.

  class Potter extends React.Component {
    render() {
      
      return(
        <div>
          Potter is awesome
        </div>
      )
    }
  }

上記のコードは、一般的な関数型素子と同様の機能を有する.render()に記入し、return()に記入しなければならないことに注意してください.(本人は連発ミスでerrを誤受信することが多い…)
Tip) 🌟🌟

クラス構成部品を使用する場合、クラス名の最初のアルファベットは大文字になります.また、クラスを他の親コンポーネントで使用するか、ループ化する場合は、親コンポーネントのrender(){return(ここに記入)}である「ここに記入」セクションにclass名という<Potter></Potter> 혹은 <Potter />のタグを追加するだけでよい.

のようなタグにクラス名を指定する場合は、CamelCase

を使用します.

<div class = ''>  --> X
<div className= ''> --> O
  
<div id=''>  ---> O // 이건 그냥 가능.

また、classコンポーネントはstate更新を許可します.
以下のコードで示します.

  class Potter extends React.Component {
    constructor(props) {
    super(props)
    this.state = {} // 초기 상태값을 삽입
    }
    
    render() {
      return ()
    }
  }

上のコードでtwittler sprintを行いました.これに対して、次の文章で書きます.

1つの構成部品から複数の構成部品を返すことができますか?

<React.Fragment></React.Fragment>안에 감싸주거나
단축 문법으로 <></>로 감싸주거나 혹은 <div>와 같은 태그들 안에 감싸주면 가능하다. 

단축문법<></>을 사용시 Key를 입력해줘야한다면
<React.Fragment></React.Fragment>로 정확하게 써줘야 한다.

3. state & props

実際、こいつらは反応twitterr&recastを実現するために大きな努力をした.
「だからこれは何?」こいつらは私を怒らせた.
まず公式文書を見てみましょう.
レスは何百回も公式文書を見ても足りないので、ぜひ見てください!https://ko.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props
state
stateは通常ステータス値と呼ばれます.
状態とは、私たちが食事をしないと、お腹が空いている状態、食事をしていると、お腹がいっぱいになっている状態、眠い状態など、リアルタイムで状態値を変更したり更新したりするのと同じです.
初期値はstateに設定されています.
いつでもsetSate()に変更できます.
そしてこの状態によってpropsに影響を及ぼす.
props
propsはプロパティで、attributeは読み取り専用で、変わりません.
propsのみが親コンポーネントからstate値を受信し、独自のコンポーネントに使用します.
またpropsを使用する場合は、厳しいルールに注意してください.
propsは修正不可能な読み取り専用です.
関数エレメントまたはクラスエレメントは、エレメントの自己propsを変更することはできません.すべてのreactエレメントは、自分のpropsを処理するときに純粋な関数のように動作する必要があります.
tip)propsを変更する場合は、->ステータスを変更し、propsを保持します.もちろん、stateはstateを持つ親コンポーネントで変更する必要があります.

순수함수 - 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문이다. imutable함수
function sum(a, b) {
  return a + b;
}

순수함수x - 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.
function sum(account, amount) {
  account.total -= amount;
}

うん.実は私も最初はブログや公式文書をたくさん見ていましたが、一気に読めませんでした.なんだ.今も...
簡単に自分の例を作って、簡単に考えて近づきましょう.
stateは最高裁判所の量刑基準だ.
propsはその量刑基準に基づいて、裁判官たちが判決したと言える.
最高裁判所は最高裁判所であり、量刑基準が設けられた場所であり、これらの基準はいつでも変更できるが、確定した量刑基準を下級裁判所の裁判官たちは変更することができず、基準に従って量刑するしかない.
うん.今はもっと理解できる例を思い出すべきではない.
手作りコードが最高です
次の文章twitterとrecastでは、簡単に議論すべきです.

4. Life Cycle

メソッド等recastクリーンアップ後更新

🌱     Potter's thought :)

困難
困難
困難
困難
しかし、勉強してから、確かに面白いです.
これがコードの魅力だと思います
反応...知れば知るほど気持ちがいい、もっと多くの奴を知りたい.
明日行われるTWITSLER&REACAST sprintは、REACTとより身近な時間を取り戻します
終わります.

React[2篇]-Recast:YouTube ClosetCart!