리액트 - 컴포넌트

 

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( 
  <h1>안녕 리액투~!</h1>, 
  document.getElementById('root');

 

 

 

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

const element = <h1>안녕 리액트!</h1>;

root.render(element, document.getElementById('root') 
);

요소를 변수에 담아 render 메소드의 아규먼트로 줄 수 있다.

 

콘솔에 출력해보면 자바스크립트 객체가 출력됨

= 리액트 엘리먼트 = 리액트로 화면을 그려내는 가장 기본적인 요소

 

render 함수의 아규먼트로 전달하면  -> 리액트가 객체를 해석해서 html로 렌더링함

 

리액트 엘리먼트를 함수형태로 만들면 JSX 문법을 작성할때 커스텀 태그처럼 활용할 수 있다?

import ReactDOM from 'react-dom/client';

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

function Hello() { //리액트 컴포넌트
  return <h1>안녕 리액트아!</h1>;
}

const element = (
<>
  <Hello />
  <Hello />
  <Hello />
</>
);

root.render(element, document.getElementById('root') 
);

Hello() 함수의 이름을 가진 태그를 사용할 수 있다

함수 이름의 앞글자가 대문자여야한다.

 

---

//Dice.js
import diceBlue01 from './assets/dice-blue-1.svg';

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

export default Dice;

이미지를 불러올때는 import 를 사용해야한다.

웹주소가 있는 이미지는 src = {} 에 바로 넣어줘도 사진이 불러와지지만

로컬에 있는 이미지는 src 안에 바로 작성할 수 없다~! 

//App.js
import Dice from './Dice';

function App(){
    return (
    <div>
        <Dice/>
    </div>
    );
} 

export default App;

return ( ) 괄호를 사용하면 여러 줄에 걸쳐서 작성할 수 있다.

 

<img/> 는 닫는 태그가 따로 없다.

함수 태그를 쓸때도 <Dice/> 닫는 태그가 없다