React 입문 - 1

React

• 사용자 인터페이스를 만들기 위한 JS 라이브러리
  공식 문서에 따르면 아래의 특징을 지님

  • 선언형

  • 컴포넌트 기반

  • 가상 DOM

  • 단방향 데이터 바인딩

  💡

  이 4가지의 특징은 결국 SPA (Single Page Application)으로 귀결

• SPA <-> MPA (Multi Page Application)

  무언가 웹페이지를 만들 경우
  대표적으로 이미지, 텍스트, 동영상의 요소가 있을 때
  우리는 이러한 요소들을 변경할 때, 새로고침을 통해 다른 요소의 로딩을 기다렸음

  또한 이런 과정은 다른 리소스 (다수의 html) 이 필요함
  이러한 것을 우리는 MPA 라고 말함

  그러면 반대로 SPA 는 하나의 리소스 (하나의 html)로
  이러한 다른 요소의 변경을 해결 할 수 있게 함

  이러한 방안을 토대로 만들어진 라이브러리가 React

  이런 SPA를 구현하기 위해서는 위의 4가지 특징이 필요

컴포넌트 기반

• UI를 재사용 가능한 조각으로 나눠서 만드는 것

//버튼 컴포넌트,  카드 컴포넌트
function Button({ text, onClick }) {
    return <button onClick={onClick}>{text}</button>;
}

function Card({ title, content }) {
    return (
        <div className="card">
            <h3>{title}</h3>
            <p>{content}</p>
        </div>
    );
}

선언형

• 명령형의 반대로 무엇을 보여줄지 정의하면
  어떻게 보여줄지는 프레임워크가 지정하는 형식
  ( 원인 → 결과 가 아니라 결과 → 원인 이라고 생각)

const button = document.createElement('button');
button.innerText = '클릭하기';
button.addEventListener('click', () => {
	const div = document.getElementById('result');
	div.innerText = "click";
});

→ 버튼을 누르면 result 라는 ID를 지닌 div에 “click” 텍스트를 출력해줘
일반 JS를 활용한 버튼 이벤트 리스너

• 선언형은 무엇을 보여줄지만 정의

  function App() {
      const [clicked, setClicked] = useState(false);
      
      return (
          <div>
              <button onClick={() => setClicked(true)}>
                  click
              </button>
          </div>
      );
  }

가상 DOM

• 실제 DOM을 직접 수정하는게 아니라 가상의 DOM에서 변경사항을 계산 후
  한번에 업데이트를 하는 방식

  • 왜 이렇게 하는가?

    • 만약 어떤 Id의 요소를 3번 수정한다 하면
      3번 렌더링이 되어 최종 결과가 되는 방식으로 JS는 위에서 아래로 처리함
      → 느림

    • 가상 DOM을 통해 어떤 부분의 변경사항만 처리하여 그 결과를
      실제 DOM에 반영한다면 한번에 결과만 반영해주면 되므로 렌더링이 1번

단방향 데이터 바인딩

• 부모 ←→ 자식으로 데이터의 흐름이 이어지는 것은 양방향

• 부모 → 자식으로 데이터의 흐름이 이어지는 것은 단방향

  • 양방향과 달리 예측이 가능, 디버깅이 쉽다는 장점이 있음

• React의 트리구조 렌더 트리가 이에 관련됨