컴포넌트에 props전달 - 2

스프레드 문법으로 props전달

-부모의 모든 props를 자식 컴포넌트에 전달할 경우 props객체로 받고 자식컴포넌트에 스프레드 문법으로 전달

 

=> 스프레드[Spread] 문법이란?

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 것

 

 

```js
// utils.js
export function getImageUrl(person, size = 's') {
  return `https://i.imgur.com/${person.imageId}${size}.jpg`;
}
```

```js
// Avatar.jsx
import { getImageUrl } from './utils.js';

export default function Avatar({ person, size, border }) {
  return (
    <>
      <div style={{ border: border }}>
        <img className="avatar" src={getImageUrl(person, size)} alt={person.name} />
      </div>
      <strong>{person.name}</strong>
    </>
  );
}
```

// Profile.jsx
import Avatar from './Avatar.jsx';

export default function Profile(props) {
  return (
    <div className="card">
      {/* <Avatar person={person} size={size} border={border} /> */}
      {/* 부모가 전달받은 모든 prop을 자식컴포넌트로 그대로 전달할 경우 */}
      <Avatar {...props} />
    </div>
  );
}

 

// App.jsx
import './App.css';
import Profile from './Profile.jsx';

export default function App() {
  return (
    <div className="app">
      <Profile
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2',
        }}
        size={'b'}
        border={'5px solid red'}
      />
    </div>
  );
}

 

자식을 jsx로 전달

• 자식 컴포넌트를 다른 자식 컴포넌트로 전달하는 방식
• 컴포넌트를 감싸 시각적으로 표현할 경우 사용하며 내용은 다르지만 디자인이 동일한 경우 사용
• children prop 사용

// Avatar.jsx
import { getImageUrl } from './utils.js';

export default function Avatar({ person, size = 150 }) {
  return (
    <>
      <img
        className="avatar"
        src={getImageUrl(person)}
        alt={person.name}
        width={size}
        height={size}
      />
    </>
  );
}

 

import Avatar from './Avatar.jsx';
import './App.css';

function Card({ children }) {
  return <div className="card">{children}</div>;
}

export default function Profile() {
  return (
    <div className="profile">
      <Card>
        <Avatar
          size={100}
          person={{
            name: 'Katsuko Saruhashi',
            imageId: 'YfeOqp2',
          }}
        />
        {/* <p>글자가 들어가면?</p> */}
      </Card>
    </div>
  );
}