일단 제가 공부중에 사용하던 예제입니다

import React, { Component } from 'react';
import PhoneForm from '../components/PhoneForm';
import PhoneInfoList from '../components/PhoneInfoList';
import Layout from '../components/Layout';

class Info extends Component {
  id = 2;

  state = {
    information: [
      {
        id: 0,
        name: '김민준',
        phone: '010-0000-0000',
      },
      {
        id: 1,
        name: '홍길동',
        phone: '010-0000-0001',
      },
    ],
    keyword: '',
  };

  handleChange = e => {
    this.setState({
      keyword: e.target.value,
    });
  };

  handleCreate = data => {
    const { information } = this.state;
    this.setState({
      information: information.concat({ id: this.id++, ...data }),
    });
  };

  handleRemove = id => {
    const { information } = this.state;
    this.setState({
      information: information.filter(info => info.id !== id),
    });
  };

  handleUpdate = (id, data) => {
    const { information } = this.state;
    this.setState({
      information: information.map(
        info =>
          id === info.id
            ? { ...info, ...data } // 새 객체를 만들어서 기존의 값과 전달받은 data 을 덮어씀
            : info, // 기존의 값을 그대로 렌더링
      ),
    });
  };

  render() {
    const { information, keyword } = this.state;
    const filteredList = information.filter(
      info => info.name.indexOf(keyword) !== -1,
    );
    return (
      <Layout>
        <div className="container">
          <div className="inner">
            <article id="info">
              <span className="sTop">
                <h1>INFO</h1>
              </span>
              <span className="sMiddle">
                <div className="infoInput">
                  <PhoneForm onCreate={this.handleCreate} />
                  <p>
                    <input
                      placeholder="검색 할 이름을 입력하세요.."
                      onChange={this.handleChange}
                      value={keyword}
                    />
                  </p>
                  <hr />
                </div>
                <PhoneInfoList
                  data={filteredList}
                  onRemove={this.handleRemove}
                  onUpdate={this.handleUpdate}
                />
              </span>
            </article>
          </div>
        </div>
      </Layout>
    );
  }
}
export default Info;

<layout> 내에 보시면 일반 html처럼도 보이지만 내부에 value="0" 이런식이 아니라 value={} 이런식으로 값이 들어가며 class도 className등 바뀐 점이 많아서 파악하는데 좀 걸렸는데요

react의 장점은 컴포넌트에 변화가 생기면 전체를 랜더링하는게 아니라 딱 그 부분만 바꿔줌으로써 성능을 향상 시킨 프레임워크입니다.

style을 넣는 부분도 많이 다르지만 익숙해지면 금방할것같습니다.

기본으로 node.js에서 작동을 하며

next.js , creat-react-app 등의 서버 사이드 프레임워크를 설치하여 사용이 가능합니다. express도 임포트 해서 사용합니다.

저는 그중에 next.js를 사용 중이고요

위에서 대체할만한 건 없습니다

nodejs 환경에서 express도 가져다 쓰고 원한다면 bootstrap jquery도 가져다 쓸 수 있는 것으로 알고 있습니다.

몽고 디비나 mysql은 디비 개념이라 다르고요.. 굳이 말하자면 nodejs(nextjs(react)) 이 정도 느낌이네요

예를 들어 php에서 코드 이 그 나이 터 나 라라벨? 을 가져다 쓰는 느낌입니다.

Q: 요즘 Vue, Angular, React를 사용하는 것이 대세인 것처럼 느껴집니다.

여기서 위 세 가지는 프론트엔드 프레임워크라고 알고 있는데, 정확히 어떤 역할을 하는건지 궁금합니다.

A:
+ React: 웹 어플리케이션의 UI 단을 만들기 위해 사용되는 프레임워크입니다. UI 단과 관련된 기능들만 제공합니다.
+ Angular: 자바스크립트 어플리케이션을 만들기 위해 사용되는 프레임워크입니다. UI단(presentional logic) 뿐만 아니라 데이터를 다루는 부분(business logic)도 작성할 수 있습니다. 또한 프론트엔드에만 국한되지 않고, 많은 포지션에서 사용할 수 있습니다(NgModule이라는 Angular 만의 모듈로 추상화의 끝판왕을 보여줍니다. DI가 그렇게 편하더군요.).
+ Vue: 웹 어플리케이션을 만들기 위해 사용되는 프레임워크입니다. persentional logic 과 business logic, 둘 다 작성할 수 있게 틀을 마련해 줍니다. 여담으로, Angular보다 익히기 쉽습니다(읽어야 할 문서가 상대적으로 적습니다.)

Q:
보통 node.js 서버에 Bootstrap으로 UI를 만들고 jQuery로 Ajax나 이벤트처리를 하는데 그럼 위 3가지 프레임워크를 사용한다는것은 어떤의미를 갖는것인지요?

A:
jQuery는 라이브러리인 반면, Vue와 Angular는 프레임워크이기 때문에 거대한 어플리케이션을 만들 때 개발자가 고려해야 하는 문제들이 상대적으로 줄여줍니다.
React 같은 경우는, jQuery 와 같은 라이브러리로 Real DOM 을 다루면서 생긴 퍼포먼스 저하 같은 문제를 해결해줄 뿐더러 컴포넌트라는 개념을 통해 계층적이면서 재사용성이 높은 웹 어플리케이션을 작성할 수 있게 해줍니다(Vue나 Angular도요.).

Q:
위 스택들중 어떤것을 대체할 수 있는건지요?

A:
위 세 프레임워크는 위 스택 중 어떤 하나를 대체하기 위해 만들어진 게 아닙니다.
다만 위 세 프레임워크를 쓰신다면, Jquery가 설 자리가 없어지게 됩니다(또는 엄청 좁아집니다).