React - reusable components(with. bulma.css)

Parent component

|  (props)

Child component

Props System

1. pass data : one way
   • 부모가 자식 컴포넌트를 다르게 구성 할 수 있게 한다.
2. add JSX element
3. 리액트는 구성요소를 하나의 객체로 묶는다
   • color ="red"→ {color: "red"}
4. child의 첫번째 인자로 넘긴다
5. 해당 인자로 넘긴 props를 사용한다.

//부모 컴포넌트

import 'bulma/css/bulma.css'
import React from 'react'
import ProfileCard from './ProfileCard'; //js파일은 확장자 필요없음
import AlexaImage from './assets/images/alexa.png'//js파일이 아니므로 필요
import CortanaImage from './assets/images/cortana.png'
import SiriImage from './assets/images/siri.png'

// 9.7kb보다 작은 경우 bundle.js 파일에 같이 포함(base64)되지만 이보다 큰 경우 파일이 분리됨

function App() {
  return (
    <div>
      <section className='hero is-primary'>
        <div className='hero-body'>
          <p className='title'>Personal Digital Assistants</p>

        </div>
      </section>
      <div className='container'>
        <section className='section'>
          <div className='columns'>
            <div className='column is-3'>
              <ProfileCard title="Alexa" handle="@alexa99"
                image={AlexaImage}
                description="Alexa was created by Amazon" />
              {/* attributes name은 작성자가 원하는 이름으로 작성 -> 이름을 이해하기 쉽게 작성하는 것이 좋음
			        Props Object ={ title: "Alexa", handle: "@alexa99"}
				      */}
            </div>
            <div className='column is-3'>
              <ProfileCard title="Cortana" handle="@cortana32"
                image={CortanaImage}
                description="Alexa was created by ms" />
            </div>
            <div className='column is-3'>
              <ProfileCard title="Siri" handle="@siri01"
                image={SiriImage}
                description="Alexa was created by apple" />
            </div>
          </div>
        </section>
      </div>

    </div>

  )
} export default App;

//자식 컴포넌트
import React from 'react'

function ProfileCard({ title, handle, image, description }) //props 대신 destructuring 한 것을 바로 작성 해도된다. 
  //const { title, handle } = props //destructuring
  return (
    <div className="card">
      <div className='card-image'>
        <figure className="image is-1by1">
          <img src={image} alt="logo" />
        </figure>
      </div>
      <div className='card-content'>
        <div className='media-content'>
          <p className="title is-4"> Title is {title}</p>
          <p className='subtitle is-6'> Handle is {handle}</p>
        </div>
        <div className='content'>
          {description}
        </div>
      </div>
		</div>
  )
}
export default ProfileCard;

 

이미지 번들링 차이

이미지 차이

 

유데미 Modern React with Redux [2023 Update] 를 듣고 정리한 글입니다.

section2 React - jsx(JavaScript Xml)