React(리액트) 티키타카 9 ( Props 구조 분해 )

React

by e7e 2024. 10. 3. 13:11

2024.10.02 - [React] - React(리액트) 티키타카 8 ( Props 이해 사용 )

를 읽고 머얌 쉽네 라고 생각했다면 미안하당 그건 아니당.

아직 험준한 산 근처에도 가지 않았당. (이건 나의 오버액션이당!~~ 👀)

깜 ! 깜! 캬무륵~ 캬무륵~ 캬무륵! 외쳐보장... 머징 왠지 히미하지만 히미난당.

또 달려 보장. 인생 마라톤 피니시 라인은 인정하고 싶지 않지만

내 존재가 사라지고 잊혀지는 거당. 급할 꺼 없당. 차분히 때론 쉬면서 가장.

Container.jsx 를 아래 처럼 배열 map 메소드를 이용 리팩토링 해보장

import "./Container.css";
import Friend from "./Friend";
function Container() {
  // 데이터가 이렇게 있다고 가정, 나중엔 서버에서 가져와야겠쭁
  const mFriends = [
    { mid: "hateminu", name: "🍴미누", age: 45, nickName: "무용못함" },
    { mid: "samssoju", name: "✨경민", age: 25, nickName: "흥 폭발" },
    { mid: "rocket", name: "😊카리나", age: 24, nickName: "로켓펀치" },
    { mid: "dancingman", name: "👀선주", age: 29, nickName: "이모티콘쩐주" },
    { mid: "e7e", name: "💜߮߬E7E", age: 75, nickName: "아무말막잔치" },
    { mid: "alcol", name: " ߮߰🖤߮߬병철", age: 27, nickName: "주사시로" },
    { mid: "lucky", name: "💟ྀི원영", age: 20, nickName: "럭키비키" },
    { mid: "ariel", name: " ᥬ🍑᭄조이", age: 28, nickName: "인어공주" },
  ];

  return (
    <div className="container">
      <h1>미누의 베.푸(Very Proud)들</h1>
      {/* 배열 map 메소드를 이용 뺑뺑이 */}
      {mFriends.length &&
        mFriends.map((friend) => (
          <Friend
            key={friend.mid}
            mid={friend.mid}
            name={friend.name}
            age={friend.age}
            nickName={friend.nickName}
          />
        ))}
      <div className="e7e">&copy;E7E 만만세</div>
    </div>
  );
}

export default Container;

그저 일관성 있게 데이터 모음을 배열로 밖으로 빼고, 문법에 맞게

map으로 뺑뺑이 돌린 것 뿐이라서, 결과는 아래처럼 예상된대로당.

여기서 주의를 해야 하는 것이 있는디, 반복 돌릴 때 JSX에 key 속성을 주지 않으면

missing(없엉) 되어 missing(그리웡)이라고 빨간 웨이브 라인이 아주 머라 한당.

key속성을 넣어주기만 하면 빨간 웨이브 라인은 떠나지만... 알아야 한당.

이 key값을 아무렇게나 주면 오동작이 발생할 수 있다는 사실을....

그저 뺑뺑도는 index값을 주는 건 성의도 없을 뿐 더러, Risk가 크당.

React는 내부적으로 key속성을 이용하여 해당 객체의 상태를 관리하기 때문인데,

억지 초과장 SF현실의 예를 들면 미누의 id가 minu공, 경민의 id는 simsim 인뎅,

갑자기 경민의 id를 minu라 하면 어찌 헷깔리지 아니 할 수 이찌 아니 하겠는강!

그저 DB의 Primary-Key처럼 일관성 있게 key값을 유지하려는 맘이 있으면 다 해결된당.

Friend.jsx 를 아래 처럼 수정해 보장.

import "./Friend.css";

function Friend({ mid, name, age, nickName }) {
  console.log("체킁:", mid, name, age, nickName);
  return (
    <div className="friend">
      <img
        src={`https://api.dicebear.com/9.x/adventurer/svg?seed=${mid}`}
        alt="아바타"
      />
      <h5>{name}</h5>
      <h5>{age}살</h5>
      <h5>{nickName}</h5>
    </div>
  );
}

export default Friend;

Friend Function의 매개변수에 구조 분해를 적용했당.

구조분해?

2023.06.14 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..)

글을 읽는다면 난 당신의 손바닥을 긁어 주겠당. (분명 의외롱 시원할 거당.)

구조분해할당( Destructuring Assignment)을 이해하면

매개변수 처리부분이 그냥 바로 JUST 머얌 이런 간단한 규칙이얌 하게 된당.

분명 또 읽지 않고 그냥 시선이 내려오는 사람이 이쓸거당.(어떨 수 없당..ㅠㅠ)

index.html이 위치한 곳에 아래 내용으로 파일을 맹글장.

구조분해.html

<!DOCTYPE html>
<meta charset="UTF-8" />
<script>
  // 구조 분해 이해해 보아용, [] 와 {} 2가지롱
  // 리액트뿐만 아니라 프론트 프레임워크(vue, angular등)에 상습적으로 사용됨
  // 머릿속에 일단 1개 기억해요 = 양쪽이 같은 형태([]냐? {}냥?)
  // 먼저 배열 구조 분해
  const e7eArr = ["유진", "나현", "다희", "선영", "미숙"];
  const [, , dh, sy] = e7eArr;
  alert(`체킁 dh sy ${dh} ${sy}`); // "체킁 dh sy 다희 선영"

  const [yj, ...others] = e7eArr;
  alert(`체킁 yj ${yj}`); // "체킁 yj 유진"
  alert(`체킁 others ${others}`); // "체킁 others 나현,다희,선영,미숙"
  alert("부디 느낌이 왔길... 순서가 보였으면!");

  // 객체 {}, 사실 배열도 객체인데, 이해를 위해 의도적 분리
  const e7eObj = { name: "민진", age: 24, nickName: "귀요미" };
  const { nickName, name } = e7eObj;
  alert(`체킁 name ${name}`);
  alert(`체킁 nickName ${nickName}`);
  alert("부디 느낌이 왔길... 속성명이 변수명으로!");

  // 함수 매개변수 보통의 처리 방식
  function fCK(pObj) {
    alert(`${pObj.name}은 ${pObj.alias}`);
  }
  fCK({ name: "지원", alias: "수학천재" });

  // 함수 매개변수에 구조 분해 적용
  function fCK2({ alias, name }) {
    alert(`${name}은 ${alias}`);
  }
  fCK2({ name: "미선", alias: "달린당" });
</script>

http://localhost:5173/구조분해.html

로 실행하여 결과와 소스를 매칭 시키는 시간을 가져여만 한당.

딱 구조분해가 먼지?, 함수의 매개변수를 구조분해하는 내용만 넣었으닝,

차분히 받아들이도록 하장. [ES6 이상에 들어간 그저 새로운 문법,기능이당]

쉽지만 소스 뉘앙스는 좀 더 많은 걸 담고 있당.

[] 은 new Array() 의 의미
{}은 new Object() 의 의미

머릿속에 위의 내용을 담고, 다시 한번 구조분해를 바라보기 바란당.

안 보여도 상관없지만, 무언가를 찾은 사람이 있다면 나와 친해져야 한당!~~(^-^)

억지 응용 한번 더 해 보장.(이건 전투력 증강을 위해 그냥 해보는 거당.)

Container.jsx 를 아래 처럼 수정하장.

import "./Container.css";
import Friend from "./Friend";
function Container() {
  // 데이터가 이렇게 있다고 가정, 나중엔 서버에서 가져와야겠쭁
  const mFriends = [
    { mid: "hateminu", name: "🍴미누", age: "45", nickName: "무용못함" },
    { mid: "samssoju", name: "✨경민", age: 25, nickName: "흥 폭발" },
    { mid: "rocket", name: "😊카리나", age: 24, nickName: "로켓펀치" },
    { mid: "dancingman", name: "👀선주", age: 29, nickName: "이모티콘쩐주" },
    { mid: "e7e", name: "💜߮߬E7E", age: 75, nickName: "아무말금수저" },
    { mid: "alcol", name: " ߮߰🖤߮߬병철", age: 27, nickName: "주사시로" },
    { mid: "lucky", name: "💟ྀི원영", age: 20, nickName: "럭키비키" },
    { mid: "ariel", name: " ᥬ🍑᭄조이", age: 28, nickName: "인어공주" },
  ];

  return (
    <div className="container">
      <h1>미누의 베.푸(Very Proud)들</h1>
      {/* 배열 map 메소드를 이용 뺑뺑이 */}
      {mFriends.length &&
        mFriends.map((friend) => <Friend key={friend.mid} friend={friend} />)}
      <div className="e7e">&copy;E7E 만만세</div>
    </div>
  );
}

export default Container;

아래 내용이 바뀐 부분이당. 객체를 속성1개에 통째로 넘겼당.

<Friend key={friend.mid} friend={friend} />

받는 부분도 바뀌어야 하닝...

Friend.jsx도 아래 처럼 수정하장.

import "./Friend.css";

function Friend({ friend }) {
  console.log("체킁:", friend);
  return (
    <div className="friend">
      <img
        src={`https://api.dicebear.com/9.x/adventurer/svg?seed=${friend.mid}`}
        alt="아바타"
      />

      <h5>{friend.name}</h5>
      <h5>{friend.age}살</h5>
      <h5>{friend.nickName}</h5>
    </div>
  );
}

export default Friend;

실행해 보면 같은 결과가 보일 거시당. ~~(^-^)

재미가 있으닝, 1개 더 보장.

Container.jsx 를 아래 처럼 수정하장.

import "./Container.css";
import Friend from "./Friend";
function Container() {
  // 데이터가 이렇게 있다고 가정, 나중엔 서버에서 가져와야겠쭁
  const mFriends = [
    { mid: "hateminu", name: "🍴미누", age: "45", nickName: "무용못함" },
    { mid: "samssoju", name: "✨경민", age: 25, nickName: "흥 폭발" },
    { mid: "rocket", name: "😊카리나", age: 24, nickName: "로켓펀치" },
    { mid: "dancingman", name: "👀선주", age: 29, nickName: "이모티콘쩐주" },
    { mid: "e7e", name: "💜߮߬E7E", age: 75, nickName: "아무말금수저" },
    { mid: "alcol", name: " ߮߰🖤߮߬병철", age: 27, nickName: "주사시로" },
    { mid: "lucky", name: "💟ྀི원영", age: 20, nickName: "럭키비키" },
    { mid: "ariel", name: " ᥬ🍑᭄조이", age: 28, nickName: "인어공주" },
  ];

  return (
    <div className="container">
      <h1>미누의 베.푸(Very Proud)들</h1>
      {/* 배열 map 메소드를 이용 뺑뺑이 */}
      {mFriends.length &&
        mFriends.map((friend) => <Friend key={friend.mid} {...friend} />)}
      <div className="e7e">&copy;E7E 만만세</div>
    </div>
  );
}

export default Container;

오디가 바뀌었냐고 물으면 아래당. 속성을 일일이 나열안하공, 전개했당.

이때 ...friend 앞의 {는 객체 생성을 의미하는 것이 아니공,

그저 자바스크립트 블록을 의미하고 있다는 사실을 깨달았다면 완전 넘 훌륭!!!

{mFriends.length &&
mFriends.map((friend) => <Friend key={friend.mid} {...friend} />}

이렇게 하면 Friend.jsx에서 바로 구조분해를 다시 사용할 수 있당.

코드도 짧고 심플하공... 머 심지어 있어 보이기까정 한당.

Friend.jsx를 아래 처럼 수정하장.

import "./Friend.css";

function Friend({ mid,name,age,nickName }) {
  return (
    <div className="friend">
      <img
        src={`https://api.dicebear.com/9.x/adventurer/svg?seed=${mid}`}
        alt="아바타"
      />

      <h5>{name}</h5>
      <h5>{age}살</h5>
      <h5>{nickName}</h5>
    </div>
  );
}

export default Friend;

실행 결과는 눈에 보이닝... 생략이당.

느끼미 친구랑 커뮤니케이션이 되었길 빛 바랜 눈으로 바래본당.

바께는 언제 부턴가 비가 내리고, 오른쪽 손목은 어느새 저리당.

누군가에게는 찔끔이나마 도움이 되었으면 하는 작은 바램의 빗소리당.

혹여 질문 또는 거꾸로 알려주고픈 게 있다면(우린 양방향이 되어야 한당)

그렇다면 글을 남겨주는 수꼬를 부탁한당. ~~

오늘은 여기까지당.~~ 안농!~~

좋은 코드를 짜는 개발자가 되려면 생각하는 시간을 가져야 한당.

(따라하기 + 생각 + 변형) 은 아주 좋은 공부 방법인데.

그저 따라하기만 하는 것은 No! No! No!당. 미래 없음이당!

잘 안되고 급하고, 계속 에러 나지만 그럼에도 코딩에 빠진당.

우리 다시해볼까?

Developer Never Die !

https://www.youtube.com/watch?v=2tda_TCjz8w

'React' 카테고리의 다른 글

React(리액트) 티키타카 11 ( useState Hook) (15)	2024.10.07
React(리액트) 티키타카 10 (레이아웃, children ) (6)	2024.10.06
React(리액트) 티키타카 8 ( Props 이해 사용 ) (4)	2024.10.02
React(리액트) 티키타카 7 (블락 기호 {} 사용) (9)	2024.10.02
React(리액트) 티키타카 6 (JSX) (2)	2024.09.30