아래의 내용은 SOPT 28기 웹파트 3차 세미나를 기반으로 정리한 내용이다.
리액트 공식문서도 참조하여 정리하였다.

1. React의 등장

✔️ Javascript의 단점

• 길고 지저분함 -> JQuery의 등장

✔️ JQuery

• 2006년에 출시된 자바스크립트 라이브러리
• DOM 조작을 쉽고 효율적으로 할 수 있음
• 브라우저 호환성 문제 해결
• ES6의 등장으로 사용하지 않게 됨

✔️ SPA의 등장

• Single Page Application
• 단순한 웹페이지가 아닌, 웹 어플리케이션으로 발전하면서 등장
• 페이지 전체를 재로딩하지 않고,필요한 부분만 동적으로 로딩하여 속도 개선
  -> React로 만들 수 있음!

2. React의 핵심 개념 4가지

✔️ Component

• UI를 구성하는 개별적인 뷰 단위
• 컴포넌트를 조합하여 새로운 컴포넌트를 만들거나, 복잡한 웹 페이지를 구성할 수 있음
• 클래스형, 함수형 2가지가 있음 (클래스형은 잘 사용하지 않음)

✔️ Virtual DOM

• DOM 요소가 변경되면, Render Tree를 만들어서 다시 화면에 보여주기까지 연산이 오래 걸림
• 웹 페이지 속도, 성능 개선을 위해 가상 DOM을 이용해서 변경된 부분만 탐지해서 실제 DOM에 적용

✔️ One-way Data Flow

• 단방향 데이터 바인딩: 단순, 예측이 쉬움
• 사용자가 view에서 입력한 값이 변수에 바로 반영되지 않음 -> Event를 거쳐야함 (보통 onChange)

✔️ JSX

• JavaScript를 확장하여 React의 요소를 생성하는 문법

3. Component의 state, props

✔️ State

• 컴포넌트 내부에서 설정되는 데이터
• 컴포넌트 내에서 값을 바꿀 수 있음

✔️ Props

• 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 데이터
• 넘겨줄때는 자식변수명={부모변수명}
• State는 동적데이터를 다루는 방식으로서, useState는 Hook를 통해서 사용함

4. Hook

• 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해줌
• 즉, state를 함수형 컴포넌트 안에서 사용할 수 있도록 도와주는 함수
• 클래스형 컴포넌트 없이 함수형 컴포넌트만 사용할 수 있도록 도와줌.

✔️ useState

클래스 컴포넌트를 사용할 때는, constructor 안에서 this.state를 사용해서 state인 count의 초기 값을 0으로 설정할 수 있다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

하지만 함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 사용할 수 없다. 그래서 useState Hook을 직접 컴포넌트에 호출한다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부른다
  const [count, setCount] = useState(0);

✔️ useEffect

useEffect는 기존에 클래스형 컴포넌트에서 componentDidMount 나 componentDidUpdate, componentWillUnmount를 이용하던 것을 함수형 컴포넌트에서 하나의 API로 통일시켜준 것이다.