Web_React #15

210826
Web_React #15

지금까진 jsx 부분을 render에 그대로 담아서 사용했다.
하지만 이 부분을 변수에 담아서 사용해도 정상적으로 작동한다.

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;
const imageUrl = 
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

const element = <>
      <h1>나만의 {item} 주문하기</h1>
      <img src={imageUrl} alt="제품 사진" />
      <button onClick={handleClick}>확인</button>
    </>;

function handleClick(){
  alert("곧 도착합니다!");
}


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

element에 담고 전달하였다.

이 element를 콘솔에 출력시켜보자

js객체가 출력되는 모습을 확인할 수 있다.
React에서는 이를 React element라고 부른다.
이 React element를 React dom에 render 메서드에 전달하게 되면 React가 이 객체를 해석해서 html으로 렌더링하는 것 이다.
React element는 React로 화면을 구성하는데 있어 가장 기본적이면서 핵심적인 요소이다.
이를 함수형태로 만든다면 커스텀 태그처럼 활용할 수 있다.

import ReactDOM from 'react-dom';

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
)
function Hello(){
  return <h1>안녕 리액트</h1>;
}

console.log(element)
ReactDOM.render(
    element,  
    document.getElementById('root')
);

react element를 반환하는 Hello 함수를 만들면 element변수에서 jsx코드를 작성할 때 함수 이름으로 된 태그를 사용할 수 있다.
Hello태그는 함수 내 반환하는 태그를 의미하게된다.

정상적으로 잘 실행된다.
이 Hello라는 함수를 React Component라고 부른다.

React를 개발할때는 React element를 React Component로 만들어서 활용한다.
단순히 함수를 만든다고 Component가 되는 것은 아니다.
1. 첫글자가 대문자
2. jsx문법으로 만든 React Element를 return 해야한다.

참고
https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react