[React] 크롬 확장자를 이용한 컴포넌트 생성

 

크롬 확장자 다운로드

 

 

1. 하단의 페이지로 이동

https://chrome.google.com/webstore/category/extensions?hl=ko

 

 

2

 

2. react 검색 > 클릭

 

 

3

 

3. Chrome에 추가 > 창 껐다가 키기

 

 

 

• 사용 방법

 

F12 > >> 클릭 > Components 클릭

 

 

 

컴포넌트 생성

 

파일 추가 생성

 

 

CompoTest.js

import React from 'react'
import Components from './Components'

//구조분해 Destructuring let { name } = {name:"이름", nickname:"닉네임"}
const CompoTest = ({name,age}) => {
    // console.log("props:", props); //props로 이름이 정해져 있음
  return (
    <div>
        <h1>{name} 첫번째 컴포넌트</h1>
        <h2>{age} 컴포넌트 내용</h2>
        <Components name="크롬 이용" age="3" context="내용" />
        <h3>테스트 내용</h3>
        <h4>index.js 파일로 가봄</h4>
        <h5>테스트 확인 가능</h5>
    </div>
  )
}

export default CompoTest

 

 

Components.js

import React from 'react'

const Components = ({name, context}) => {
  return (
    <div style={{border:"2px solid black", backgroundColor:"skyblue"}}>
        이름 : <input type="text" value={name} />
        나이 : <input type="number" value="" />
        내용 : <textarea value={context}></textarea>

    </div>
  )
}

export default Components

 

결과 화면1

 

 

 

• 응용

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
// import App from './App';

import CompoTest from './CompoTest';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
      <CompoTest name="component1" age="1" name2="또 다른 이름1" age2="5" context="내용2"/> 
      <CompoTest name="component2" age="2" name2="또 다른 이름2" age2="6" context="내용3"/> 
      <CompoTest name="component3" age="3" name2="또 다른 이름3" age2="7" context="내용4"/> 
    </div>
);

 

 

CompoTest.js

import React from 'react'
import Components from './Components'

const CompoTest = ({name,age,name2,age2,context}) => {
  return (
    <div>
        <h1>{name} 첫번째 컴포넌트</h1>
        <h2>{age} 컴포넌트 내용</h2>
        <Components name={name2} age={age2} context={context} />
        <h3>테스트 내용</h3>
        <h4>index.js 파일로 가봄</h4>
        <h5>테스트 확인 가능</h5>
    </div>
  )
}

export default CompoTest

 

 

Components.js

import React from 'react'

const Components = ({name, context, age}) => {
  return (
    <div style={{border:"2px solid black", backgroundColor:"skyblue"}}>
        이름 : <input type="text" value={name} />
        나이 : <input type="number" value={age} />
        내용 : <textarea defaultValue={context}></textarea>

    </div>
  )
}

export default Components

 

결과 화면2

 

 

 

즉각 실행 함수를 이용한 for문

 

 

파일 생성 위치

 

 

CompoTest2.js

import React from 'react'

const CompoTest2 = () => {
  return (
    <div>
        <h1>테스트2</h1>
        {
            /* 직접 반복문은 못 씀
            for(let i=1; i<=10; i++) {
            }
            */

            //즉각실행 함수
            (function() {
                const name = [];
                for(let i=1; i<=10; i++) {
                    name.push(<h1>즉각 실행 함수{i}</h1>)
                }
                return name /* 배열 리턴 jsx를 포함하고 있음 */
            })()
        }
    </div>
  )
}

export default CompoTest2

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
// import App from './App';

import CompoTest2 from './CompoTest2';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
      <CompoTest2 />
    </div>
);

 

결과 화면3

 

 

=> 위의 방식으로 할 경우 에러 발생

key 를 추가함

 

CompoTest2.js

import React from 'react'

const CompoTest2 = () => {
  return (
    <div>
        <h1>테스트2</h1>
        {
            //즉각실행 함수
            (function() {
                const name = [];
                for(let i=1; i<=10; i++) {
                    name.push(<h1 key={i}>즉각 실행 함수{i}</h1>)
                }
                return name /* 배열 리턴 jsx를 포함하고 있음 */
            })()
        }
    </div>
  )
}

export default CompoTest2

 

 

 

다른 서버를 동시에 이용한 CrossOrigin 처리

 

 

CompoTest2.js

import React from 'react'

const CompoTest2 = () => {
  return (
    <div>
        <h1>테스트2</h1>
        {
            (function() {
                /* 2개의 서버가 서로 다름에 주의, 8004, 3000 */
                fetch("http://localhost:8004/api/bds").then((response)=>{
                    response.json().then((rslt)=>{
                        console.log("체크 : ",rslt);
                    })
                })
            })()
        }
    </div>
  )
}

export default CompoTest2

 

 

과거의 코드를 이용

 

CrossOrigin 추가

 

 

 

• 데이터 이용 : 컴포넌트 생성

Bd.js

import React from 'react'

const Bd = () => {
  return (
    <div style={{"border":"5px groove black"}}> { /* 스타일도 객체기에 중괄호를 한 번 더 해줘야함 */}
        <div>BD넘</div>
        <div>BD제목</div>
        <div>BD내용</div>
        <div>
            <img src="" alt="사진"/>
        </div>
    </div>
  )
}

export default Bd

 

 

CompoTest2.js

import React from 'react'
import Bd from './Bd'

const CompoTest2 = () => {
  return (
    <div>
        <h1>테스트2</h1>
        <Bd />
        {
            (function() {
                fetch("http://localhost:8004/api/bds").then((response)=>{
                    response.json().then((rslt)=>{
                        console.log("체크 : ",rslt);
                    })
                })
            })()
        }
    </div>
  )
}

export default CompoTest2

 

결과 화면4 : 화면이 보이는지 확인

 

 

 

=> 응용

 

Bd.js

import React from 'react'

const Bd = ({bdNum, bdTitle, bdCont, bdFurl}) => {
  return (
    <div style={{"border":"5px groove black"}}> { /* 스타일도 객체기에 중괄호를 한 번 더 해줘야함 */}
        <div>{bdNum}</div>
        <div>{bdTitle}</div>
        <div>{bdCont}</div>
        <div>
            <img src={bdFurl} alt="사진"/>
        </div>
    </div>
  )
}

export default Bd

 

 

CompoTest2.js

import React from 'react'
import Bd from './Bd'

const CompoTest2 = () => {
  return (
    <div>
        <h1>테스트2</h1>
        <Bd />
        {
            (function() {
                fetch("http://localhost:8004/api/bds").then((response)=>{
                    response.json().then((rslt)=>{
                        console.log("체크1 : ",rslt);

                        //비동기니까 여기에 처리해야 함
                        //map : 새로운 배열을 리턴
                        let rsltMap = rslt.map((bd)=>{ 
                            return <Bd bdNum={bd.bdNum} bdTitle={bd.bdTitle} 
                                        bdCont={bd.bdCont} bdFurl={bd.bdFurl}/>
                        })

                        console.log("체크2 : ", rsltMap);
                        return rsltMap
                    })
                })
            })()
        }
    </div>
  )
}

export default CompoTest2

 

결과 화면5