React (1) React란?

■ React란?

- React는 컴포넌트이다.

- UI를 구축하는 js라이브러리 겸 프레임워크, 즉 동적으로 사용자가 보게 될 화면을 꾸밀 수 있다.

 

■ 컴포넌트란?

- UI구성을 확장성있고 유연하게 만들어주기 위해 만들어졌다. 

- 화면을 이루는 구성요소이며 하나하나를 컴포넌트라는 블록 단위로 포장해서 재사용성을 늘렸다.

※ 리액트에서는 화면에 모든 구성요소를 컴포넌트로 표현할 수 있다.

 

■ JSX(JavaScriptXML)문법이란?

- JavaScript의 문법 안에서 html요소가 함께 들어가 있는 형태의 언어이다.(선언적 방식)

- 리액트에서 UI를 구성하기 위해 보편적으로 사용되는 문법이며 자바스크립트의 문법을 통해 html요소를 생성하는 역할을 한다.

- JSX문법은 개발자가 복잡한 자바스크립트 코드를 짤 필요 없이 동적으로 추가되는 DOM요소를 단순한 코드 선언만으로 만들 수 있다.

※ 내가 작성한 JSX문법의 코드가 실제로 실행될 때는 리액트가 브라우저에서 구동되고 있는 자바스크립트 코드로 자동으로 컴파일되면서 실행이 된다.

 

■ 루트노트란?

- React로 구현한 애플리케이션은 일반적으로 하나의 루트 DOM노드가 존재한다.

- 리액트를 구동하기 위해서는 DOM앨리먼트 또는 React앨리먼트를 root.render() 함수 안에 넣어주면 된다.

- 페이지 로딩 후 root.render() 함수 내부에 호출하고자 하는 리액트 컴포넌트를 추가 시 해당 컴포넌트가 호출된다.

※ App()이라는 컴포넌트를 사용하기 위해서는 반드시 상단에 import로 App컴포넌트가 추가되어 있어야 한다.

- 리액트 컴포넌트는 반드시 대문자로 시작해야 하며 리액트에서 소문자는 html DOM요소(div, body, p, ...)로 해석하고 대문자로 시작했을 때만 리액트 컴포넌트로 해석하기 때문이다.

 

■ 노드란?

- HTML을 구성하는 각 요소들을 Node라고 부른다.

Document	=>	Document node
각 요소 객체(html, head, body, p, div, ...)	=>	element node(Document의 자식)
각 요소 속성(id, class, name, ...)	=>	attribute node
텍스트	=>	text node
주석	=>	comment node

- 모두 노드이면서 계층구조를 가지고 있다.

 

■ 예시 코드

● App.js

import './App.css';
import {Lifecycle} from './01_Lifecycle';

function App() {
  // 자바스크립트 영역
  <h2>js영역</h2>

  return (
    <div>
      {/* JSX문법 영역 안에서 주석을 사용하는 방법. JSX문법안에서의 중괄호는 JS영역으로 인식이 된다. */}
      <Lifecycle props_value="From App.js" />
    </div>
  );
}

export default App;

● index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

● 01_Lifecycle.js

import { Component } from "react";

class Lifecycle extends Component{

    static getDerivedStateFromProps(props, state) {

        console.log("2. getDerivedStateFromProps 호출");
        console.log(props, state);

        return{tmp_state : props.props_value};

    }

    componentDidMount() {
        
        console.log("4. componentDidMount() 호출");

        this.setState({tmp_state2:true});

    }

    shouldComponentUpdate(props, state) {
        
        console.log("5. shouldComponentUpdate 호출 / tmp_state2 = " + state.tmp_state2);
        
        return state.tmp_state2;

    }

    constructor(props) {
        super(props);

        this.state = {};
  
       console.log("1. constructor() 호출");
    }

    render() {
        console.log("3. render함수 호출");
        console.log(this.state);
        return(
            <h2>render 함수 호출</h2>
        )
    }

}

export {Lifecycle}