反応的にコードしますか?

概要
今年6月から11月にかけて、複数のショッピングサイトを参考に個人練習に使うプロジェクトがある.
一人で独学で、このようにコードしますよね?と思った.
案の定、このコードを初めて見た指導者は

이건 React 스럽지가 않은데요?

そして投げ出すキーワードは「Map」関数

약간 이런식으로 코딩한다고 보면 될 것 같아요

{
  renderArray.map((item)=>{
    <component props={item.id}/>
  }
}

이게... 무슨 소리지?

それが何を意味しているのかはまだ意識していないが、今は何なのかかすかに分かっているようだ.
反応哲学

公式ホームページではReactをUIを作成するJavaScriptライブラリについて紹介しています.
ユーザインタフェース(UI)がWebページのビューであることは分かりやすい.
Webページ、モバイル環境など、UIはどこにでもあります.
文章の中の“起承転結”のように、インタフェースはそれぞれの機能を含む破片から構成されています!そう思うよ

그러니까.. 웹 페이지에서는
사용자에게 항상 보여야하는 Navigation bar가 있고
핵심내용을 담는 Contents 영역이 있을 거고..
만약 광고를 넣고싶으면 사이드나 특정 영역에 Ad banner가 있겠지?
그리고 저작권이라던가...전화번호라던가... 그런 정보는 맨 아래에
있던 기억이 있구나!

私の文章として再定義すると

거대한 틀 속에 각기 다른 기능을 가진 독립적인 개체들이
입맛에 맞게(?) 배치되어 있는 웹 서비스!

以前に使用したコードセグメント.
いったいどんな和弦が反応するのか?!
自嘲的な気持ちで自分のコードをアップロードする

웅성웅성.. 이게 뭐야..?

その時の浅薄な知識(?)振り返ると
たとえば、データベースからのデータのインポートに成功した場合

axios.get('/api/getData')
.then(res=>{
  if (res.data.status){
    setClothesMap(true)
  }
 )

衣装マッピングの状態を更新します.
table形式で存在する領域には、各要素が受信された情報が含まれている.
生成して貼り付けばいい!そう思うよ
しかし、DOMに直接触れる行為なのでreactに魅了されます.

React公式サイトに書いてあるように.
これはまったく簡単なビューではありません.

아하... 내가 '절차형 프로그래밍'에 매몰되어 있었구나

そんな思いで自己反省した瞬間
宣言式とコマンド式(コマンド式)
一年生の時に初めて触れた言葉はC
だからよく知られているハロー、world!最初から、気持ち悪く使うfor文に慣れていました.

#include <stdio.h>
int main(){
 int testArr = [0,1,2,3,4]
 int maxNumber = 0;
 for (i=0; i<testArr.length; i++){
   if (maxNumber<testArr[i]){
     maxNumber = i;
  }
 }
}

簡単なサンプルコードを作成しました.
ハングルで順番を定義するとこんな感じでしょうか?

1. 전달받은 testArr 배열이 있고, 여기서 가장 큰 값을 구할거다!
2. 그러면 배열을 모두 순회하면서..
3. 현재 가지고 있는 최대값보다 순회 중인 값이 더 크다면!
4. 최대값을 다시 업데이트해주자!

これはパソコンにこの順番でこのような仕事をさせましょう.プロシージャタイプとコマンドタイプの構造があります.
これに対して、宣言型はタスクを実行させるだけで、タスクの実行方法を教えてくれません.
日常生活で例を探すと...

# 명령형의 경우....
 *** 라면 끓이기 ***
1. 봉지를 뜯는다
2. 물을 올린다.
3. 물이 끓으면 스프를 넣고, 건더기 스프를 넣고 면을 넣는다.
4. 4분 후에 맛있게 먹는다!
5. 김치를 꺼낸다.
6. 김치를 그릇에 담아 라면과 같이 먹자.

# 선언형의 경우...
1. 라면을 끓인다.
2. 김치를 반찬으로 먹는다.

すなわち、コマンド形式は、ある操作の詳細な説明に焦点を当てている.
宣言型は何をするかに注目すればいい.
では前のコードに戻って考えたら….

아하..! 난 전혀 React 스럽게 코딩하고 있지 않는 거구나...

このような書き出しは浮かび上がりやすい.
Do it like React! is it correct?
以上の結論を出した後、私は考えを変えることにした.

그럼 최상위에 있는 페이지에서
기능에 대해 명세하는 것이 아니라, 각 기능을 독립적인 컴포넌트로 만들어서
배치시키기만 하는 용도로만 사용해보자.

例:

export default Main(props){
 return(
  <>
   <navBar/>
   <contentsArea/>
   <adBanner/>
   <footer/>
  </>
)}

次に、操作の詳細な説明は、各コンポーネントが自分で処理するようにします.
ではmap関数はなぜキーワードになるのでしょうか.
この部分は「伝言」機能を実現したときに理解しました.
まず,最上位素子のみにコマンドを実行する必要はないと考えられる.

예를 들어 인스타그램 피드는
1. 프로필 헤더 영역
2. 피드 이미지 영역
3. 댓글 렌더링 영역
4. 댓글 작성 영역
네 개의 각각의 컴포넌트로 구성될 수 있는 거니까..
<Main> 밑에 <Feed>가 있고
<Feed> 밑에 <Header>, <FeedImg>, <CommentBox>, <InputComment>
이렇게도 구성되면 되는거지~

ではコメントはリアルタイムでアップします...これはどのようにレンダリングしますか?と思ったのですが、

여기서 실시간으로 받아오는 데이터를 state에 넣고
map 함수를 돌려가면서 컴포넌트를 렌더링해주면 되는거 아냐?

そんな思いで作ったコードは…!

以前書いたコードに従えば.

const divTag = document.createElement('div')
divTag.id = 'feedCommentsBox'
.........주저리주저리

こう書くと長くなる部分がきれいに整理されています
このようなアイデアでフラグメントを収集して作成した最上位のプライマリコードは、次のようになります.

上記のコメント機能は次のとおりです.
命令形式でFeedCommentComponentが生きている
(成功した気がする…)

메인페이지에는 Navbar가 최상단에 있고
실시간으로 받아오는 feed 데이터가 map함수를 통해 계속 그려질 것이고
Sidebar가 오른쪽에 있다.
그 각각의 작업은 Main이 알바가 아니고, 그건 컴포넌트 내에서
알아서 명세하든가 말든가 해라!

の最後の部分

答えはいろいろあります.
私は上のメインコードを指導者に見せます.

내가 그 때 그 코드 봤을 때 뭔 생각했을지 이제 알겠죠 ㅋㅋㅋ

誤ったRepoはボリュームの増加とともに増加しています.
あ….こんな変な編集をしたことがある
安心できる缶として残しておきたいです.
いつ面接しても、どんな状況でも、誰でも
「どうして反応を使うの?」私があなたに聞いたとき.
先週、どのように答えるかの手がかりが見つかったようです.
次の整理する文章はまだ分かりません.
『reactiprops drilling』を考えてみるつもりです