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

2024.10.01 - [React] - React(리액트) 티키타카 7 (블락 기호 {} 사용)

까지 읽고 왔다면, 그랬다면 아니 반갑지 아니 할 만큼 반값이당.

 

반값이라니 듣기만 해도 에너지가 분출된당. 그럼 달려서 소비하장

 

준비를 위해 아래 파일들을 복사/붙여넣기로 src 폴더에 맹글장.

[ 깊이는 아니더라도 눈으로 대략 의미 파악 정도는  하는 걸롱! ]

 

Friend.css

.friend {
    box-sizing: border-box;
    width: 150px;
    height: 250px;
    border: 5px groove blueviolet;
    display: inline-block;
    text-align: center;
    font-size: 1.5em;
  }
  h5 {
    margin: 0px;
    margin-bottom: 5px;
  }

 

Friend.jsx

import "./Friend.css";

function Friend() {
  return (
    <div className="friend">
      <img
        src="https://api.dicebear.com/9.x/adventurer/svg?seed=minu"
        alt="avatar"
      />
      <h5>이름</h5>
      <h5>나이</h5>
      <h5>별명</h5>
    </div>
  );
}

export default Friend;

아바타 이미지를 제공해주는 사이트의 URL을 일부러 쨈 발랐당.

class가 아니공, className임에 주의하장.  JSX는  html이 아니라고 했당.

자바스크립트 문법의 확장이라서,  자바스크립트의 예약어인 class를 쓸 수 없당.

그래서 react에선 class대신 className이라고 적자고 정했당.

 

Container.css

.container {
    width: 600px;
    min-height: 420px;
    border: 1px solid pink;
    margin: 50px auto;
    text-align: center;
  }
  .e7e {
    font-size: 4em;
    line-height: 130%;
    background-color: black;
    color:yellow;
  }

 

Container.jsx   (이것은 컴포넌트인가 레이아웃인가?~~ ㅋㅋ)

import "./Container.css";
import Friend from "./Friend";
function Container() {
  return (
    <div className="container">
      <h1>미누의 베.푸(Very Proud)들</h1>
      <Friend />
      <Friend />
      <Friend />
      <Friend />
      <div className="e7e">&copy;E7E 만만세</div>
    </div>
  );
}

export default Container;

 

 

App.jsx  아래 처럼 수정하장.

import Container from "./Container";
function App() {
  return (
    <div>
      <Container />
    </div>
  );
}

export default App;

 

실행 결과는 아래랑 비스무리 할거당.(잘했당!)

 

하지만 기분이 안 좋당. 왱? 아바타/이름/나이/별명이 다 똑같당. ㅠㅠ

개선해 보장.(시르면  시름시름 앓다가 다시 하고시포진당.~~)

 

기억하자... 부모 자식 방향으로만 흐른당. 머가? 정보가?

Container는 Friend의 부모당. 왱? Friend를 가지고 있으니깡!

 

Container.jsx 를 아래 처럼 고치장.

import "./Container.css";
import Friend from "./Friend";
function Container() {
  return (
    <div className="container">
      <h1>미누의 베.푸(Very Proud)들</h1>
      <Friend mid="hateminu" name="미누" age={45} nickName="무용 못함" />
      <Friend mid="samssoju" name={"경민"} age={25} nickName={"흥 폭발"} />
      <Friend mid="rocket" name="카리나" age={24} nickName="로켓 펀치" />
      <Friend
        mid="dancingman"
        name={"선주"}
        age={29}
        nickName={"이모티콘쩐주"}
      />
      <div className="e7e">&copy;E7E 만만세</div>
    </div>
  );
}

export default Container;

뽀인또는 Friend 태그에 내 맘대로 속성을 지정하고 값을 주었당.

[ 숫자 값을 줄 때 좀 특별함이 왠지 절로 보인당.~~ ]

 

Friend.jsx 도 아래 처럼 고치장

import "./Friend.css";

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

export default Friend;

Props에 굉장히 주목해보장.  매개변수이니 이름은 맘대로 바꾸어도 되는뎅...

React에선 그냥 안 혯갈리겡 Props로 쓰기로 했으닝.. 고집 부리지 말공 따르장. 

console의 결과를 꼬옥 눈으로 확인하장.

 

아마동  아래와 같은 결과 일꺼시기당. 느끼미 설마 안 왔는강?

느끼미 오다 말았다면.. 다시 소스를 차분히 보면 분명 보이고야 말거당.

속성값들을 모두 한꺼번에 담고 있는 애가 Props란 사실을.......

 

 

코드와 그림으로  저절로 길어진 걸  빡빡한 마음으로 제외시키면

사실 별로 한 건 없지만, 난 css를 맹글공, 화면을 캡쳐 하느랑 

오늘은 이미 많이 지쳤당.

 

다음 글에서 위의 소스를 쪼메 리팩토링 해보공, 매개변수에도 

구조 분해를 적용해서 코드를 얄팍하게 나마  얇고 간략하게 해보장. 

 

직접 리팩토링 아이디어를 내보는 것도 정말 값진 시간이 될꺼이당!!!

 

---

때때로 아주 가끔  언제였는지 기억도 안 날 그런 싸이클로

 

지금 난 왜 이걸 하고 있지?  이게 대체 내게 무신 의미얌?

 

의미란 걸 찾을 수는 있을까?

 

나의 삶은 이미 가스라이팅 당한 게 아닐까?

 

인생을 빼앗긴 것도 모르고, 바보처럼

 

희생을 감수당하며, 목소리 조차 내뱉지 못하는 건 아닐까?

 

나로 시작하는 드라마!   

 

역시 그 답은 은퇴로 부터  시작 될 수 있을 것 같당.

  

 

https://www.youtube.com/watch?v=D8VEhcPeSlc