React 입문 - 컴포넌트 만들어보기 - 2

Props

• Properties 의 줄임말

• 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터, 데이터 전달 방법

  • 자식은 받기만 하지 바꾸는 것은 불가능 하다

  • 중간에 받아 갖고 있는 역할을 함

사용법

// 자식 컴포넌트
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

// 부모 컴포넌트
function App() {
  return (
    <div>
      <Greeting name="철수" />
      <Greeting name="영희" />
      <Greeting name="민수" />
    </div>
  );
}

// 결과:
// 안녕하세요, 철수님!
// 안녕하세요, 영희님!
// 안녕하세요, 민수님!

• Greeting이라는 컴포넌트 공간에 props 공간에 name 이라는 이름으로 값을 가짐

세미콜론 여부

• 일반 Statement엔 그대로 사용

• JSX 내부에선 세미콜론 필요 없음

컴포넌트 만들어보기

• 부가 컴포넌트들 → 한 개의 메인 컴포넌트에 붙여 사용

  • 컴포넌트 기반이라는 React의 특징과 단방향 데이터 바인딩의 특징!

import { useEffect, useState } from 'react'
import './App.css'

// 컴포넌트 붙이기
import GreetingCard from './component/GreetingCard.jsx'
import ItemList from './component/ItemList.jsx';

function App() {
 //... 코드들
  return (
      <div className='App'>
    	{/*... JSX 코드들*/}
          <GreetingCard message={greeting} />
          <ItemList />
          </div>
        )}
      </div>
  )
}

export default App

• App 메인 컴포넌트에 GreetingCard, ItemList 라는 컴포넌트를 붙이고
  JSX 내부에서 태그로 활용

/* ItemList 컴포넌트*/
import { useState } from "react"

function ItemList() {
    const [items, setItems] = useState(['사과','바나나','포도']);
    const addItem = () => {
        const newItem = prompt("추가할 과일을 입력하세요");
        if(newItem) {
            setItems([...items, newItem]);
        }
    }

    return (
        <div>
            <h3>과일 리스트</h3>
            {/*React에서 li는 중복되지 않는 키를 지녀야함*/}
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>

            <button onClick={addItem}>
                과일 추가
            </button>
        </div>
    )
}

export default ItemList

/*------------------------------------------------------------*/

/* 또 다른 GreetingCard 컴포넌트*/
function GreetingCard(props) {
    return ( 
        <div className="card">
            {
                props.message ? (<p>{props.message}</p>) : (<p>인사말이 여기에 표시됩니다.</p>)
                // props 안에 message 라는 변수 속 데이터가 존재하면!
            }
        </div>
    )
}

export default GreetingCard

• 따로 생성한 두개의 컴포넌트, 각각 JSX 파일로 만들고 메인 컴포넌트에 import

• 데이터의 흐름이 메인 컴포넌트 → 부가 컴포넌트

• 부가 컴포넌트는 각각에서 데이터를 받아 UI가 바뀜