728x90

043

1. React ? 2. 바닐라 자바스크립트로 React 이해하기_State 상태 변경 3. Component 4. JSX와 Babel 5. Class형 컴포넌트_토글버튼 생성 6. React의 LifeCycle (생명주기) 7. Class형 컴포넌트_현재시간 렌더하기

React ?

React는 사용자 인터페이스를 만들기 위한 라이브러리이다.

위의 React에 대한 정의는 공식적으로 정의된 내용이다. react는 페이스북에서 2011년도 쯤 여러 실력좋은 개발자들이 모여서 만든 라이브러리이다. react가 프레임워크다, 라이브러리다 얘기가 많은 라이브러리이다. 다른 개발자들은 왜 프레임워크라고 얘기하는 걸까?

React 개발을 할 때 편하게 초기 세팅을 설치받아서 사용할 수 있다. 메타에서 개발한 라이브러리는 react, react-router이며, 오픈소스에 기여중이다.

우선 프레임워크가 무엇이고, 라이브러리가 무엇인지부터 확인해보자😏

프레임워크

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미한다.
애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 구조를 제공하며 구조를 기반으로 코드를 작성하여 애플리케이션을 개발한다.
앱, 서버 등의 구동, 메모리관리, 이벤트루프 등의 공통된 부분은 프레임워크가 관리하며 사용자는 프레임워크가 정해준 방식대로 클래스, 메서드로 구현을 진행한다.

라이브러리

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다.
특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용가능한 도구들을 의미한다.

프레임워크와 라이브러리의 공통점과 차이점은?

공통점

복잡한 개발을 편리하게 하기 위해서 미이 작성해서 제공해준 코드이다.
필요한 기능을 미리 만들어서 사용할 수 있는 형태로 제공한다.

차이점

프레임워크
- 개발자가 작업을 하기 위한 전체적인 tool을 제공한다.
- 개발자는 tool 안에서 그 방식에 맞춰 작업한다.
- 애플리케이션의 코드가 프레임워크에 의해 사용된다.
  - 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름을 프레임워크가 가지고 있다.
  - 이러한 상황을 제어의 역전(Inversion Of Control)이라 말한다.
    - 제어의 역전: 어떠한 일을 하도록 만들어진 Framework에 Control 권한을 위임하는 것을 의미한다.
      - 프로그램의 제어 흐름 구조가 뒤바뀐 것이다.
라이브러리
- 전체적인 tool이 아닌, 하나의 기능만을 도구처럼 제공한다.
- 개발자는 필요한 도구(라이브러리)를 가져와서 사용한다.
- 애플리케이션의 코드가 사용자에 의해 직접 제어된다.
  - 개발 시 필요한 기능이 있을 경우, 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 사용한다.

🤔 React를 프레임워크라고 하는 이유는?

메타에서 라이브러리를 개발하고 ' npx creat-react-app [폴더명] ' 구문으로 패키지를 제공한다.

react를 개발할 때 초기 세팅의 편리를 위해 권장 개발환경을 구성해주기 때문에 프레임워크라고 주장을 하지만, React는 UI를 렌더링 하기 위한 라이브러리일 뿐, 제어 흐름의 권한이 사용자에게 있기 때문에 React는 라이브러리이다.

🙊 React는 Virtual DOM을 사용하여 변경된 부분만을 다시 렌더링한다.

Virtual Dom?

실제 DOM을 기반으로 만들어진 가상의 DOM이다. 왜 virtual Dom을 사용해야 하는걸까?

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어, 실제 DOM을 조작하는 작업이 무겁다. 이러한 점을 보완하기 위해 React에서는 실제 DOM의 변경사항을 빠르게 파악하고 반영하기 위해서 내부적으로 가상 DOM을 만들어서 관리한다. 이 가상의 DOM은 React의 상태가 변하면 새로운 가상 DOM이 생성되고 이전 상태의 가상 DOM과 비교하여 업데이트할 부분을 찾아 실제 DOM에 업데이트를 진행한다.

virtual Dom을 사용하면 실제 DOM에 접근하는 것이 아닌, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 위에그림을 예로 들면 빨간 부분이 수정사항이 발생한 부분이다. Virtual DOM은 달라진 값을 탐지하여 변경된 값이 있는 부분인 빨간 부분만 변경하고 최종 결과물을 실제 DOM에 전달한다. 만약, Virtual DOM이 아닌 실제 DOM이었다면 변경사항이 있는 빨간 부분만이 아닌 모든 부분이 리렌더링 되었을 것이다. 이처럼 실제 DOM의 경우에는 사소한 변경사항에도 전체가 리렌더링되기 때문에 브라우저에 과부하가 올 수 있어 Virtual Dom의 역할은 중요하다.

SSR, CSR와 SPA

SSR (Server-Side Rendering)

인덱스 페이지에 표시되어야 할 HTML 파일을 먼저 브라우저가 다운 받고, Javascript 파일도 다운받는다.
Javascript 파일을 다운 받는 동안에 이미 html 파일의 렌더링을 시작하기 때문에 웹페이지 표시가 빠르다.
렌더링이 빠르다는 장점이 있지만 페이지를 이동할 때마다 화면 깜박임(화면이 로드될 때마다 화면이 백지로 변하고 화면이 다시 출력되는 과정)이 있다.
- 웹페이지의 용량이 가벼울 경우에는 문제가 없으나, 무거워질 경우에는 화면 깜박임이 길어져 사용자 경험이 나빠질 수 있다.
- 매번 페이지를 요청할 때마다 새로고침되고, 서버에 매번 요청하기 때문에 서버부하가 크다.
SEO(검색엔진 최적화)에 친화적이다.
- SEO(검색엔진 최적화)?
  - 웹 사이트나 웹 페이지를 검색엔진에서 더 잘 찾을 수 있도록 최적화하는 과정과 기술을 말한다.
  - 최적화를 통해 검색엔진에서 웹 사이트의 노출성과 순위를 향상시키는 것이 목표이다.

CSR (Client Side Rendering)

맨 처음 URL 요청에 웹 문서가 가지고 있는 모든 정보, 링크페이지까지도 한 번에 다 받아온다.
초기 화면 로드가 느리다. 하지만 로드가 완료되고 나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아진다.
- 예) 페이스북과 같은 대형 플랫폼의 화면이 많은 사진과 정보가 있음에도 페이지를 이동할 때 화면 깜박임이 없는 이유이다.
ESO(검색엔진 최적화)에 친화적이지 않다.
- 초기에 검색 엔진 크롤러가 받는 HTML이 단순한 템플릿이라, 실제 콘텐츠는 JS에서 동적으로 생성된다. 때문에 검색엔진 크롤러는 페이지의 콘텐츠를 어렵게 인식하거나 놓칠 수 있으며, SEO에 부정적인 영향을 줄 수 있다.
- 이를 개선하기 위해 추가적인 작업이 필요할 수도 있다.

SPA (Single Page Application)

기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 진행했었다. 점점 규모가 커지고 사용자와 상호작용이 많아지며 속도 저하의 문제가 생겼고, 이를 해결하기 위해 나온 것이다.
SPA는 페이지 전체가 아닌 바뀔 부분, 즉 필요한 부분에만 로딩한다.
- Header나 Nav 같은 중복되는 요소들을 매번 불러오는 것은 불필요한 트래픽의 증가로 느린 반응성 때문에 쾌적한 사용자 경험을 제공하기 어렵다.

바닐라 자바스크립트로 React 이해하기_State 상태 변경

<body>
    <div id="root"></div>
</body>


<script>
    const root = document.querySelector('#root'); 
    // DOM을 직접 다루지 않고 state(상태 값)으로 렌더링

    let state = {
        items : ["아이템 1", "아이템 2"]
    }

    //렌더링 해줄 함수
    const render = ()=>{
        // 상태 값이 아닌 변수를 그냥 사용하면
        // 변수를 다시 선언해서 초기화된다.
        // 그러면 보관해야하는 값은 상태 값으로 보관을 해야한다.
        let temp = 0;
        const {items} = state;
        root.innerHTML = `
        <ul>
            ${items.map((item)=>`<li>${item}</li>`)}    
        </ul>
        <button id = "append">추가✏️</button>
        `

        document.querySelector('#append').addEventListener("click",()=>{
            // state 상태를 변경시키자.
            // react는 상태 값을 주시하고 있는데
            // 상태를 주시하고 있는 이유는 상태가 변하면 다시 리렌더팅 시킨다.
            // setState으로만 변경을 하자고 약속함 (강제로 바꿀 수는 있지만 강제는 좋지 않가 때문에,,,)
            setState({items : [...items, `아이템 ${items.length + 1}`]});
            console.log(temp);
            temp++;
        })
    }

    const setState = (_state)=>{
        // 초기 상태 값에 추가로 새로운 상태값을 넣어준다.
        state = {...state,..._state};
        // 상태 값이 변경되면 렌더링
        render();
    }

    // 최초에 한번 그려주자.
    render();
</script>

Document

Component

Component?

React는 화면에서 UI 요소를 구분할 때 컴포넌트라는 단위를 사용한다.
react에서 자주 사용할 것 같은 UI 요소의 기본단위이다. (재사용성이 있다.)
- react에서 앱을 이루는 가장 작은 조각이라 말할 수 있다.
컴포넌트는 새로운 컴포넌트를 생성할 수도 있고, MVC의 view를 독립적으로 구성하여 재 사용할 수 있다.
컴포넌트는 함수 컴포넌트와 클래스 컴포넌트가 있다.

컴포넌트의 구성요소

property(props)
- 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터이다.
  - react는 데이터의 흐름이 단 방향성이기 때문에 자식에서 부모로 값을 전달해줄 수 없고, 프로퍼티 값은 자식 컴포넌트에서 수정할 수 없다.
  - 이러한 단점을 해결 할 수 있도록 store라는 전역 저장소를 사용한다.
    - store: 전역 상태가 저장되고 관리되는 공간이다.
state
- 컴포넌트의 상태를 저장하고 수정 가능한 데이터이다.
context
- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달되는 데이터이다.

함수 컴포넌트

Javascript의 함수 기반 컴포넌트이다.
JS 함수를 선언하듯이 function으로 컴포넌트를 정의하고 return문에 JSX 코드를 반환한다.
v16 부터 Hooks를 통한 state, LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장한다고 한다.

~~자세한 내용은 추후에 배울 것 같은 느낌적인 느낌으로 함수 컴포넌트는 추후에 더 알아보기로 하자.......~~

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

// 화살표 함수
const MyComponent = () => {
    return (
        <div>
            Hello React!
        </div>
    );
};

클래스 컴포넌트

Javascript의 클래스 기반 컴포넌트로 class로 정의하고 render() 함수에서 JSX 코드를 반환한다.
클래스 컴포넌트의 특징
- class 키워드로 클래스 컴포넌트를 생성한다.
- React.Component를 상속한다.
  - React의 ComponentClass를 상속받아 Component 상속이 필요하다.
- render() 메서드를 필수로 사용한다.
  - 클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX를 리턴한다.
- this 키워드를 사용한다.
  - state, props, refs, 컴포넌트 메서드, 생명주기 메서드를 사용할 때 this로 프로퍼티를 참조한다.

    class Component {
        target;
        state;  // 컴포넌트의 유지되는 데이터 상태 값

        constructor(target){
        	// 컴포넌트의 생성자 함수이다. setup()과 render()메서드를 호출하여 초기 설정을 렌더링한다.
            // 컴포넌트의 target을 설정
            this.target = target;
            this.setup();
            this.render();
            console.log("나는 최초 render")
        }

        setup(){
            // 컴포넌트를 초기 설정 렌더링 하기전에 동작하는 함수.
            console.log("컴포넌트 초기 세팅");
        }

        template(){
            // 컴포넌트 HTML템플릿을 반환 해줄거임.
            return "";
        }

        render(){
            // 컴포넌트를 타켓 요소에 렌더링
            this.target.innerHTML = this.template();
            this.setEvent();
        }

        setEvent(){
            // 컴포넌트의 이벤트 세팅
            console.log("컴포넌트 이벤트 세팅")
        }

        setState(_state){
            // 컴포넌트의 상태를 업데이트
            // 업데이트 되면 리렌더링
            this.state = {...this.state, ..._state};
            this.render();
            console.log("나 상태 바뀌었음!")
        }
    }

// App class 컴포넌트 상속받아서 정의
    class App extends Component {
        setup(){
            // App 컴포넌트 초기 세팅 함수
            this.state = { items: ["아이템 1", "아이템 2"]};
        }

        template(){
            //App 컴포넌트의 HTML을 생성해서 반환
            const { items } = this.state;
            return `
            <ul>
                ${items.map((item)=>`<li>${item}</li>`)}
            </ul>
            <button>추가</button>
            `
        }

        setEvent(){
            // App 컴포넌트의 이벤트 등록
            this.target.querySelector("button").addEventListener("click",()=>{
                const {items} = this.state;
                this.setState({items : [...items, `아이템 ${items.length + 1}`]});
            })
        }
    }


    // root 선택자로 잡고
    const root = new VirtualDOM(App, document.querySelector("#root"));
    root.render();

JSX와 Babel

JSX(Javascript XML)?

Javascript에 XML을 추가하여 확장한 문법이다.
JSX를 React와 함께 사용하여 UI가 실제로 어떻게 보일지 설명하는 것을 권장한다.
HTML 태그를 변수로 할당, 호출, 리턴할 수 있는 확장 문법이다.

Babel?

babel의 원래 이름은 '6 to 5' 라는 이름이었다.
- 6에서 5로 보낸다는 의미로, ES6 ▶ ES5 로 바꿔주는 것을 의미한다.
- 자바스크립트에는 버전이 존재하는데 과거의 브라우저는 당시 신형 문법인 ES6를 제대로 호환하지 못했고, ES6를 ES5로 변경해주는 도구가 있어야 오래된 브라우저에서도 사용이 가능했다.
- 이러한 최신 문법을 이전 세대의 코드로 호환해주는 기능을 제공한 것이 babel이다.
babel을 사용하면 JSX를 브라우저가 읽기 쉬운 ES5 코드로 변환해주고, 이를 바탕으로 개발자는 최신 문법을 사용하면서 여러 브라우저에서 작동될 수 있는 코드를 작성할 수 있게 되었다.

<!-- React, ReactDom 라이브러리와 babel 사용 예시 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- React, ReactDom 라이브러리 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- babel을 가져와서 JSX 문법을 사용한다. -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Babel은 자바스크립트 코드를 변환해주는 착한 도구이다. -->
</head>
<body>
    <div id="root"></div>
</body>
<!-- 스크립트 태그에 babel을 적용시킨다. -->
<script type="text/babel">
    class LoginBtn extends React.Component {
    
    .....
    
    }
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    root.render(<LoginBtn id="2">안냥</LoginBtn>)
</script>
</html>

Class형 컴포넌트_토글버튼 생성

클래스형 컴포넌트는 class 키워드가 필요하고, Component를 상속받아야 한다.
화면을 그리기 위한 render() 메소드가 반드시 필요하다.
constructor안에서 this.state를 통해 객체 형식으로 초기값 설정이 가능하다.
- constructor 없이도 초기값을 설정할 수는 있다.
createRoot 메소드: 렌더링을 위한 root 객체를 생성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- React, ReactDom 라이브러리 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- babel을 가져와서 JSX 문법을 사용한다. -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    class LoginBtn extends React.Component {
        constructor(props){
            // 부모 생성자 함수 호출
            super(props);
            // 컴포넌트의 상태
            // 처음 상태가 false이므로, render()에서 화면에 그려지는 값은 Login일 것이다.
            this.state = {
                isLogin : false,
            }
        }

        render(){
            return(
                // 중괄호({})는 EJS(<%  %>)처럼 자바스크립트 구문을 사용하겠다는 의미이다.
                <button onClick = {()=>{
                    // 현재 상태의 반대 값으로 준 것.
                    this.setState({isLogin: !this.state.isLogin});
                }}> 
                {this.state.isLogin ? "Logout" : "Login"}
                </button>
            )
        }
    }

    // 루트 요소를 가상 DOM으로 생성한다.
    // 루트를 root 아이디를 가진 태그로 설정
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // JSX문으로 LoginBtn 컴포넌트를 root에 렌더링한다.
    // LoginBtn는 하나의 컴포넌트이다.
    root.render(<LoginBtn id="2">안냥</LoginBtn>)


</script>
</html>

React의 LifeCycle (생명주기)

React의 컴포넌트에는 LifeCycle이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다.
컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전 후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이러한 경우에 컴포넌트의 LifeCycle 메서드를 사용한다.

Mounting

Constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드이다.
getDerivedStateFromProps: Props에 있는 값을 State에 넣을 때 사용하는 메소드이다.
render: 준비한 UI를 렌더링하는 메소드이다.
ComponentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메소드이다.

Updating

💡 컴포넌트는 다음 4가지의 경우에 업데이트 된다.

Props가 바뀔 때
State가 바뀔 때
부모 컴포넌트가 리렌더링될 때
this.foceUpdate로 강제로 렌더링 트리거할 때

getDerivedStateFromProps: 앞서 Mount 과정에서도 호출되고, Props 변화에 따라 state 값에도 변화를 주고 싶을 때 사용하는 메소드
shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메소드이다.
- true를 반환하면 다음 LifeCycle 메소드를 계속 실행한다.
- false를 반환하면 리렌더링 작업을 중지한다.
render: 컴포넌트를 리렌더링 한다.
getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출한다.
componentDidUpdate: 컴포넌트의 업데이트 작업이 다 끝난 후 호출한다.

Unmounting

Mount의 반대과정으로, 컴포넌트를 DOM에서 제거하는 과정이다.

componentWillUnmount: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출한다.

LifeCycle 메소드

✏️ render()

컴포넌트의 모양새를 정의한다.
필수로 사용해야하는 메소드이다.
this.props와 this.state에 접근할 수 있다.
리엑트 요소를 반환한다.
render 함수에서 setState를 사용할 수 없고, 브라우저의 DOM에 접근하면 안된다.

✏️ Constructor(props)

컴포넌트 생성자 메소드이다. 컴포넌트를 만들 때 처음으로 실행된다.
초기 State를 정할 수 있다.

✏️ getDerivedStateFromProps (nextProps, prevState)

React v16.3 이후에 새로 추가되었다.
props로 받아온 값을 state에 동기화 시키는 용도로 사용한다.
컴포넌트가 Mount, Update 될 때 호출된다.

static getDerivedStateFromProps(nextProps, prevState) {
  // 조건에 따라 특정 값 동기화
    if(nextProps.value !== prevState.value) {
     return { value: nextProps.value };
    }
    return null;  // state 변경할 필요 없을 경우 null 반환
}

✏️ componentDidMount()

컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행된다.
다른 JS 라이브러리 또는 프레임워크의 함수를 호출할 수 있다.
이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리한다.

✏️ shouldComponentUpdate(nextProps, nextState)

props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 결정한다.
- true 또는 false를 반환한다.
컴포넌트를 만들 때, 따로 만들지 않을 결루, default = true 값을 반환한다.
- false 값을 반환하면, 업데이트 과정(리렌더링)을 중지한다.
- 프로젝트 성능을 최적화할 때, 리렌더링을 방지할 때 false값을 반환하는데 이는, 컴포넌트 최적화에 도움이된다.
이 메서드 안에서 props와 state는 this.props와 this.state로 접근하고, 새로 설정할 때는 nextProps와 nextState로 접근한다.

✏️ getSnapshotBeforeUpdate( prevProps, prevState)

React v16.3 이후에 새로 추가되었다.
render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출한다.
반환 값은 componentDidUpdate에서 세 번째 파라미터인 snapshot의 값으로 전달된다.
주로 업데이트 하기 직전의 값을 참고할 일이 있을 때 활용한다.
- 예) 스크롤바 위치유지

getSnapshotBeforeUpdate(prevProps, prevState) {
  if(prevState.array !== this.state.array) {
    const { scrollTop, scrollHeight } = this.list;
    return { scrollTop, scrollHeight };
  }
}

✏️ componentDidUpdate(prevProps, prevState, snapshot)

리렌더링을 완료한 후 실행한다.
업데이트가 끝난 직후로, DOM 관련 처리를 해도 괜찮다.
prevProps 또는 PrevState를 사용해서 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다.
getSnapshotBeforeUpdate에서 반환한 값이 있으면 snapshot 값으로 전달받을 수 있다.

✏️ componentWillUnmount()

컴포넌트를 DOM에서 제거할 때 실행한다.
componentDidMount에서 등록한 이벤트, 타이머, 직접 생상한 DOM이 있다면, 여기서 제거 작업을 해야한다.

✏️ componentDidCatch(error, info)

컴포넌트 렌더링 도중에 에러가 방생했을 때 애플리케이션이 먹통되지 않고, 오류 UI를 보여줄 수 있도록 한다.
- error: 어떤 에러가 발생했는지
- info: ** 어디에 있는 코드에서 오류가 발생했는지에 대한 정보
해당 메소드는 컴포넌트 자신에게 발생하는 에러를 잡아낼 수 없고, 자신의 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다.

componentDidCatch(error, info) {
  this.setState({
    error: true;
  });
  // .. 에러시 보여줄 작업
}

Class형 컴포넌트_현재시간 렌더하기

componentDidMount에서 현재 1초마다 현재시간을 업데이트 해 줄 setInterval을 사용한다.
render에서 화면에 그려내줄 내용을 입력한다.
html영역에서 입력한 div를 불러오고 해당 div를 루트 요소로 가상 DOM을 생성한다.
- 가상 DOM에 Clock 컴포넌트를 부여한다.

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    class Clock extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                Time : new Date().toLocaleTimeString()
            }
        }

        componentDidMount(){
            // 여기 내용이 컴포넌트가 생성되면 호출된다. 최초에 딱 한 번만
            // 비동기 작업을 처리하는 메소드이다.
            setInterval(()=>{
                this.setState({Time : new Date().toLocaleTimeString()})
            },1000);
            console.log("최초에 실행됨")
        }

        componentDidUpdate(){
            // 리렌더링을 완료한 후 실행한다.
            console.log("State 업데이트 됨");
        }

        render(){
            return(
                // 한 번에 두 개의 태그를 내 보낼 수 없으니, 태그 하나에 묶어서 내보내야 한다.
                // 묶을 때 밖의 태그가 필요없으면 태그에 값을 비우면 된다.
                <>
                    <h1>안녀어엉 내 컴퓨터 시간</h1>
                    <h2>time : {this.state.Time}</h2>
                </>
                
            )
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<Clock />);
</script>