[React] createElement, ReactDOM, JSX에 대해서

createElement

React에서는 createElement 함수를 통해 React 요소를 생성할 수 있다.

하지만 실제로 createElement를 쓰는 경우는 많지 않기에, 이해만 하고 넘어가자.

 

createElement를 쓸 때

첫 번째 argument는 root에 들어갈 HTML 태그이며,

두 번째 argument는 props가 포함된 object,

세 번째 argument는 content이다.

 

※ chatGPT의 createElement에 대한 설명도 첨부한다.

React.createElement(type, [props], [...children])

• type: React 요소의 타입을 나타냅니다. 예를 들어, HTML 요소라면 문자열로 "div", "span" 등을 사용하며, 사용자 정의 컴포넌트라면 컴포넌트의 함수나 클래스를 전달합니다.
• props (선택 사항): React 요소에 전달할 속성을 나타냅니다. 일반적으로 HTML 속성처럼 이름과 값을 가진 객체로 전달됩니다. 예를 들어, {className: "my-class", onClick: handleClick}와 같이 속성을 전달할 수 있습니다.
• children (선택 사항): React 요소의 내부에 들어갈 내용을 나타냅니다. 이 부분은 해당 요소의 자식 요소를 나타내는데, 문자열, 숫자, 다른 React 요소 등이 될 수 있습니다.

 

예시

const element = React.createElement(
  'div',
  { className: 'my-class', onClick: handleClick },
  'Hello, World!'
);

---

ReactDOM

ReactDom은 모든 React element들을 HTML body에 둘 수 있도록 해주는 library or package이다.

 

ReactDOM.render() -> render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미이다.

 

ReactDOM.render(span, span이 가야할 위치) -> 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 둔다.

 

예시

import ReactDOM from 'react-dom';
const element = <h1>Hello, React!</h1>;
const container = document.getElementById('root'); // 실제 DOM 요소
ReactDOM.render(element, container);

---

JSX

JSX는 자바스크립트를 확장한 문법이다.

 

JSX 내에서 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있다. (스타일은 {} 2개이다.)

const name = 'Alice';
const greeting = <h1>Hello, {name}!</h1>;

 

 

주의할 점이 잇는데, JSX는 브라우저가 온전히 이해하지 못하므로

브라우저가 이해할 수 있게 https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야한다.

그리고 바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식할 수 있다.

 

const Button = () => (
             <button 
                style={{
                    backgroundColor: "tomato",
                }} 
                onClick={() => console.log("im clicked")}>
                Click me
                </button>
        );
        const Container = () => 
        <div>
            <Title />
            <Button />
        </div>
        ReactDOM.render(<Container />, root);

 

div에 const를 넣기 위해서는 먼저 const를 함수로 만들어줘야 한다.

const Btn = () => ();

arrow function 이라고 부른다. = () => ( ); 는 function Btn() { return ( ); } 와 같음

 

HTML 태그처럼 만들어서 넣어줘야 되고 컴포넌트의 첫 글자는 반드시 대문자여야 한다.(우리가 직접 만든 요소는 전부 대문자로 시작해야 한다)

 

---

위 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의에서 알려준 내용 중 일부를 포함하고 있습니다.

React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다.

(밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.)

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders