(7)React_초급_JSX 문법4 : 커스텀 태그 만들기, 컴포넌트 만들기

● 외부 JS코드의 변수에 태그를 저장한 후, => render() 매개인자 내의 JSX 코드에 사용하기

○ Ex1_ 태그를 저장한 후, render메소드에 넣어 출력해보기

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

const element = <h1>시발련아</h1> //태그 + 태그.textContent 직접 저장

console.log(element) // console.log로 출력하면, 태그내용값이 아닌 객체가 출력된다.

root.render(
  element
);

 

-  Console 출력장면 :

 

 

○ 커스텀 태그 :★Ex2_ 외부 JS에 태그를 반환하는 function 초기화 , 선언 => JSX 코드에 태그로 사용

• 함수선언시, FirstLetter은 UpperCase . 즉, 메소드이름은 첫글자 대문자로 해야한다.

//많이 사용

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

function BisokU()
{
  return <h1>시발련아아아아아아</h1>;
}

root.render(
  <>
  <BisokU/>
  <BisokU/>
  <BisokU/>
  </>
);

-  React 프로젝트 출력장면 :

● 컴포넌트 만들기

- '컴포넌트' 정의 : 외부의 function + 태그 반환 모음들을 선언한 뒤, 다른 Js에 사용할 수 있도록 하는 체제 같음

//약간 java에서 package + import 하는 느낌

- 과정(App 컴포넌트 만들기)

○ 순서 1 : src 폴더에 'App.js' 생성 => function 작성 =>  "export default 컴포넌트명" 으로 외부 사용 허용

- App.js 내용

function App()
{
  return <div>App 컴포넌트!</div>
}

export default App;

○ 순서 2 : `import 컴포넌트명 from './App.js경로'` 작성 => JSX코드 내 , 즉, render()메소드 매개인자 내 <컴포넌트 명 /> 사용

//index.js에 App 컴포넌트 불러오기 

- index.js 코드 내용

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <>
    <App />
  </>
);

◎ 연습문제 :

● 문제조건 : 

• dice.js 파일 src 폴더에 만들어, 이미지 태그를 반환 하는 function들이 있는 컴포넌트 작성
• index,js의 render()매개인자에 호출하여, 주사위 그림들을 전부 출력해봐라

● 답 :

- Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';


function Dice()
{
  return <img src={diceBlue06} alt='주사위'></img>;
}

export default Dice;

- index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <>
    <Dice/>
  </>
);