Props

9. props
1> 용도
- 화면 레이아웃이 중첩된 형태로 되어있고 이때 부모 컴포넌트에서 
  자식 컴포넌트에게 데이터를 전달할때 사용하는 방법. (단방향)

2> 특징
- 단방향(부모에서 자식으로만 전달 가능)
- 전달되는 데이터 종류 제한이 없음.
- 필수가 아닌 옵션

3> 문법
가. 속성(proerty)이용
ex>
    <Child  key1={값|변수} key2={값|변수} />

    function Child(파라미터) { <== 전달되는형식: JSON {key1:값, key2:값}
        return (
            ...
        );
    }

    // 객체분해할당
    function Child({key1, key2}) { <== 객체분해할당 
        return (
            ...
        );
    }

    // default 파라미터
    function Child({key1, key2} = 값) { <== default 파라미터 
        return (
            ...
        );
    }

나. body 이용
ex>
    <Child>
        값(문자열, JSX)
    </Child>

    function Child(파라미터) { <== JSON 으로 전달됨. {key1:값, key2:값}
        body는 파라미터.children 으로 얻음.
    }

 

<props-children>

# App.js

import logo from './logo.svg';
import './App.css';
import google from './assets/google.png';

// 부모 컴포넌트
function App() {

  const person = { username: "홍길동", age: 20 }

  return (
    <div className="App">
      <h1>App 컴포넌트</h1><br></br>
      <h3>Avater 컴포넌트</h3>
      <Avatar {...person}>
        <h2>사진</h2>
        <img src={google} width="100" height="100" />
      </Avatar><br></br>
      <h3>Avater2 컴포넌트</h3>
      <Avatar2 {...person}>
        <h2>사진</h2>
        <img src={google} width="100" height="100" />
      </Avatar2><br></br>
      <h3>Avater3 컴포넌트</h3>
      <Avatar3 {...person}>
        <h2>사진</h2>
        <img src={google} width="100" height="100" />
      </Avatar3><br></br>
    </div>
  );
}

// 자식 컴포넌트
const Avatar = (props) => {
  console.log(props);
  var username = props.username;
  var age = props.age;
  var children = props.children;

  return (
    <div className="Avatar">
      이름: {username}<br></br>
      나이: {age}<br></br>
      {children}<br></br>
    </div>
  );
};
/*
Object
age: 20
children: Array(2)
  0: 
    {$$typeof: Symbol(react.element), type: 'h2', key: null, ref: null, props: {…}, …}
  1: 
    {$$typeof: Symbol(react.element), type: 'img', key: null, ref: null, props: {…}, …}
length: 2
[[Prototype]]: Array(0)
username: "홍길동"
[[Prototype]]: Object
*/

// 객체분해할당 이용
const Avatar2 = (props) => {

  const { username, age, children } = props;

  return (
    <div className="Avata2">
      이름: {username}<br></br>
      나이: {age}<br></br>
      {children}<br></br>
    </div>
  );
};

const Avatar3 = ({ username, age, children }) => {

  return (
    <div className="Avata2">
      이름: {username}<br></br>
      나이: {age}<br></br>
      {children}<br></br>
    </div>
  );
};


export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

<props-children_2 : 조건부랜더링>

# App.js

import logo from './logo.svg';
import './App.css';
import google from './assets/google.png';

// 부모 컴포넌트
function App() {

  const person = { username: "홍길동", age: 20 }

  // 조건에 해당하는 변수
  var showImage = false;

  return (
    <div className="App">
      <h1>App 컴포넌트</h1><br></br>
      <h3>Avater 컴포넌트</h3>


      <Avatar {...person}>
        {/* 
          조건부 랜더링문법
          {변수 && JSX}
        */}

        {
          showImage && // showImage 가 true 일때만 이미지가 보임
          <>
            <h2>사진</h2>
            <img src={google} width="100" height="100" />
          </>
        }



      </Avatar><br></br>

    </div>
  );
}

const Avatar = ({ username, age, children }) => {

  return (
    <div className="Avata2">
      이름: {username}<br></br>
      나이: {age}<br></br>
      {children}<br></br>
    </div>
  );
};


export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

<props-속성(proerty)이용>

# App.js

import logo from './logo.svg';
import './App.css';

// 부모 컴포넌트
function App() {

  // 문법정리하기위해서 분리함.
  var username = "홍길동";
  var age = 20;
  var address = "서울";

  // 일반적인 데이터 전달방식(json)
  var person = { username: "이순신", age: 20, address: "부산" };

  return (
    <div className="App">
      <h2>App 컴포넌트</h2><hr></hr>
      <Avatar username={username} xxx={age} address={address} /><br></br>
      <Avatar2 username={username} xxx={age} address={address} /><br></br>
      <Avatar3 username={username} xxx={age} address={address} /><br></br>
      <Avatar4 username={username} xxx={age} /><br></br>
      <Avatar5 {...person} /><br></br>
    </div>
  );
}

// 자식 컴포넌트
function Avatar(props) {
  console.log("props: ", props); // json 형태
  var username = props.username;
  var age = props.xxx;

  return (
    <div className="Avatar">
      <h3>Avatar 컴포넌트</h3>
      이름: {username}<br></br>
      나이: {age}<br></br>
      주소: {props.address}<br></br>
    </div>
  );
}

function Avatar2(props) {

  // 객체분해할당
  const { username, xxx, address } = props;

  return (
    <div className="Avatar2">
      <h3>Avatar2 컴포넌트</h3>
      이름: {username}<br></br>
      나이: {xxx}<br></br>
      주소: {address}<br></br>
    </div>
  );
}

function Avatar3({ username, xxx, address }) {

  return (
    <div className="Avatar3">
      <h3>Avatar3 컴포넌트</h3>
      이름: {username}<br></br>
      나이: {xxx}<br></br>
      주소: {address}<br></br>
    </div>
  );
}

// function Avatar4({ username, xxx, address }) {
//   console.log(address); // undefined : 선언만 되어있고 초기화가 안되었을때

//   return (
//     <div className="Avatar4">
//       <h3>Avatar4 컴포넌트</h3>
//       이름: {username}<br></br>
//       나이: {xxx}<br></br>
//       주소: {address}<br></br>
//     </div>
//   );
// }
function Avatar4({ username, xxx, address = "부산" }) {
  console.log(address);
  return (
    <div className="Avatar4">
      <h3>Avatar4 컴포넌트</h3>
      이름: {username}<br></br>
      나이: {xxx}<br></br>
      주소: {address}<br></br>
    </div>
  );
}

// spread 연산자를 이용해서 json 형태로 통으로 전달가능.
function Avatar5({ username, age, address }) {
  console.log(address);
  return (
    <div className="Avatar5">
      <h3>Avatar5 컴포넌트</h3>
      이름: {username}<br></br>
      나이: {age}<br></br>
      주소: {address}<br></br>
    </div>
  );
}

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}