[React] 272샘의 React8 ( Props 이해 사용 )

 

 

 

https://deahan.tistory.com/427

[React] 272샘의 React7 (블락 기호 {} 사용)

까지 읽고 왔다면

 

준비를 위해 아래 파일들을 복사/붙여넣기로 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;

  }

  .minwoo {

    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>e7e의 베.푸(Very Proud)들</h1>

      <Friend />

      <Friend />

      <Friend />

      <Friend />

      <div className="minux">&copy;MINUX 만만세</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>e7e의 베.푸(Very Proud)들</h1>

      <Friend mid="likeminux" 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="minux">&copy;MINUX 만만세</div>

    </div>

  );

}

export default Container;

 

 

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

[ 숫자 값을 줄 때 좀 특별함이 왠지 절로 보임]

 

Friend.jsx 도 아래 처럼 고치장

 

import "./Friend.css";

function Friend(Props) {

  console.log("check:",{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란 사실을.......

 

다음 글에서 위의 소스를 조금 리팩토링 해보고, 매개변수에도 

구조 분해를 적용해서 코드를 간략하게 해보자...

 

직접 리팩토링 아이디어를 내보는 것도 정말 값진 시간이 될것이라고 e7e샘이 그랬다.

 

출처 : https://e-7-e.tistory.com/256