#96. React 2(함수), component와 props

 

함수의 정의 및 사용

import { Fragment } from "react";

const BreakTime = () => {
    return <h1>쉬는 시간입니다~</h1>
}

const LectureTime = () => {
    return <h1>수업 시간입니다~</h1>
}

const GetSnack = props => {
    console.log(props);
    const name = props.name;
    const kind = props.kind;

    // props.name = '바꿀 수 없음 props는 불변객체';

    return (
        <>
            <p>{name}는</p>
            <p>{kind}입니다.</p>
        </>

    )
}

const Chap02 = () => {

    return (
        <>
        <div>
            {
                /*
                    Component를 나눠서 return할 때 주의할 점!
                    반드시 하나의 부모요소로 감싸주어야 함!!!
                    딱히 감쌀 태그가 없다면 <Fragment> 또는 <> 빈태그를 사용함

                */

            }


            <h1>안녕 나는 Chap02야~~</h1>
        </div>
        <div>
            <h1>Component</h1>
            
            - React는 Component를 이용해서 재사용이 가능한 조각을 만듦! <br/>
            - 모듈화한 조각을 조합해서 View를 재구성하며 사용할 수 있음! <br/>
            
            Component 정의 방법은 함수 / 클래스가 있음! 클래스는 비권장하는 방법

            {/*
                <BreakTime ></BreakTime>
                <LectureTime></LectureTime>
                <LectureTime />

            */}
            <GetSnack name='이클립스' kind='사탕'></GetSnack>
            <GetSnack name='크런키' kind='초콜릿'></GetSnack>
            <GetSnack name='에이스' kind='과자'></GetSnack>
            <br/>
            - Component는 데이터(props)를 전달받아서 View(state)상태에 따라 다르게 랜더링 할 수 있음
            <br/>


            <hr/>
            <h2>
                주의사항 : 컴포넌트는 반드시 대문자로 시작해야함!!!
                (리액트는 소문자로 시작하는 컴포넌트는 컴포넌트가 아닌 DOM태그로 인식함)
            </h2>
            <h2>React의 컴포넌트는 Pure해야 하기 때문에 절대로 props값을 변경해선 안됨!!!</h2>


        </div>
        </>
    )

    
}

export default Chap02; {/* 파일마다 export default는 하나만 사용가능 */}

 

 

export 꼭 하고 import 꼭하고

상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨줌

 

App.js

import logo from './logo.svg';
import './App.css';
import Chap01 from './component/page/Chap01';
import Chap02 from './component/page/Chap02';
import IdolInfo from './component/idol/idolInfo';

function App() {

  const idolList = [{name : 'ENHYPEN',
                     image : 'https://i.namu.wiki/i/jXfnSAvaPK-WNM0cHaCqDeIkAmrddyVQuSM0mBNHDVxbeSnzvzCn2uqDil3yhI1UzqZEruEjzmFFKH2pcMcOuXMeM_WlgGeLuTGNii72N7VLxaEaIW-Ui3sO8IdOQPyk4xHIvieLjRQUjMlgfU7vbA.webp',
                     member : 7,
                     song : '몰랐어'},
                    {name : 'LE SSERAFIM',
                     image : 'https://i.namu.wiki/i/LoxpZ21-IgOoIV3iTbI3XVrunh6Ndn_9aF7l19Zfcr-sM_70tlX24WrHM9lbVJzJe6LutJLOrwlcSlvlfzMuWMYiG4-wMKH8w9RStOvfkz0fhfIgv3YBXbhkpRTwgVT44DS8Cpevi8ws2uBrbRNHNA.webp',
                     member : 5,
                     song : 'FEARLESS (Japanese ver.)'},
                    {name : '량현량하',
                     image : 'https://i.namu.wiki/i/zFsCBM-LdnXJUXiYcgcgx-gmBXzsmivwgESDV6alivHHSjU9-vbV6SLms2GOkfnZrbOiADGLHZwum0PKRdM-yvaAtf_9uxkmpWrBV-KgZev5aayHgFnTjkrMjz0HWTRKYkBWjqf19dcpvDex0YyHZA.webp',
                     member : 2,
                     song : '학교를 안갔어'}];

  return (
    <div className="App">
      {
       // <Chap02 />
       // <Chap01 />
       // <Chap01 />
       // <Chap02 />
      }
      <IdolInfo idolList={idolList}/>
    </div>
  );
}

export default App;

 

 

indolInfo.jsx

import IdolDetail from "./idolDetail";
import IdolMain from "./idolMain";


const IdolInfo = props => {

    /*
    console.log(props);
    console.log(props.idolList[0]);
    const [idol1, idol2, idol3] = props.idolList;
    */

    const idolList = props.idolList;
    // console.log(idolList);

    /*
    const idol1 = props.idolList[0];
    const idol2 = props.idolList[1];
    const idol3 = props.idolList[2];
    */
   // 

    return ( 
        <>
            <IdolMain />

            {
                /*
                    <IdolDetail idol={idol1} />
                    <IdolDetail idol={idol2} />
                    <IdolDetail idol={idol3} />
                */

                    idolList.map((idol, index) => {
                        // console.log(idol);
                        // console.log(index);
                        return (
                            <IdolDetail idol={idol} key={index} />
                        )
                    })
            }
            
            <br/>
            
        </>
    );


}

export default IdolInfo;

 

 

 

idolDetail.jsx

const IdolDetail = props => {

    // console.log(props);
    const idol = props.idol;

    return(

        <div className="info">
            <div>
                <img src={idol.image} alt="아이돌사진" />
            </div>
            <div>
                <p>그룹명</p>
                <p>{idol.name}</p>
            </div>
            <div>
                <p>인원</p>
                <p>{idol.member}</p>
            </div>
            <div>
                <p>대표곡</p>
                <p>{idol.song}</p>
            </div>
        </div>


    )


}

export default IdolDetail;

 

 

idolMain.jsx

const IdolMain = () => {

    return (
        <>
            <div id="header">
                <h1 id="main-title">아이돌의 정보를 한눈에~~~</h1>
            </div>
            <div id="main-image">

            </div>
            <h2>Ah~Yeah~ 태사자 in the House! Uh!</h2>
        
        </>


    )



}


export default IdolMain;