[React] The basic of React

 

#02 The basic of React

 

React 란?

- 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

 

< vanilla Js , React Js 차이점 >

- Vanilla Js 

   HTML 작성 후 JavaScript로 DOM 선택 및 수정하여 UI 조작

- React Js

   모든 것이 JavaScript로 시작, JSX 사용, React가 자동으로 UI 업데이트

 

 

ReactJs 

Element 생성, Event Listener 추가, 상태관리

 

React-dom

React 요소 실제 HTML로 변환하여 브라우저에 렌더링

 

 

< JSX 사용하지 않은 코드 >

 const root = document.getElementById("root");
        const h3 = React.createElement(
       "h3",
        {
            id: "title",
            onMouseEnter: () => console.log("mouse enter"),
        },
        "Hello I'm a span"
        ); 
        
        const btn = React.createElement(
        "button",
        {
            onClick: () => console.log("i m clicked!"),
            style: {
                backgroundColor: "tomato",
            }
        },
        "click me"
        ); 
        const container = React.createElement("div",null,[h3,btn])
        ReactDOM.render(container,root);

 

➣ Render : react 요소를 가지고 html 만들어 배치

   ex) ReactDOM.render(container, root) -> container를 root에 넣음

 

 

< JSX 사용한 코드 >

 

JSX :  js 확장한 문법으로 *Babel 함께 사용 

*Babel : JSX를 브라우저가 이해할 수 있는 형태로 변환 

const root = document.getElementById("root");
        const Title = () => (
            <h3 id = "title" onMouseEnter = {() => console.log("mouse enter")}>
            Hello I'm a title
            </h3>
            );

        const Button = () => (
            <button id = "btn" style = {{backgroundColor: "tomato"}}
            onClick = {() => console.log("i m clicked!")}> 
            Click me
            </button>
            );

        const Container = () => (
            <div> 
            <Title /> 
            <Button /> 
            </div>
        );

        ReactDOM.render(<Container/>,root);

 

➣ 렌더링시 arrow function

 

* 직접 만든 요소는 대문자로 쓸 것 !

ex) Container 안 <Title>을 <title>로 쓰면 HTML태그로 인식