카테고리 없음

React SPA, State & Props

als982001 2023. 1. 25. 12:00

1. SPA (Single Page Application)

 기존에는 웹사이트 내에서 다른 페이지로 이동하면, 페이지를 보여주기 위해 전체 페이지를 불러와야 했다. 그렇기 때문에 반응이 느렸으며 서버에 불필요한 트래픽을 발생시켰다. 그리고 시간이 지나며 전체가 아니라 업데이트가 필요한 데이터만 서버에서 받아 동적으로 보여주는 방식이 보편화 되었는데, 이를 SPA라 한다. SPA의 장점은 다음과 같다.

  1.  필요한 부분만 업데이트 하기 때문에 사용자의 행동에 빠르게 반응한다. 이로 인해 보다 나은 사용자 경험을 제공할 수 있다.
  2. 서버 입장에서는 요청받은 데이터만 넘겨 주면 되기 때문에 과부하 문제가 줄어든다.

그리고 SPA의 단점은 다음과 같다.

  1. 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고 대부분은 JavaScript 파일에 들어있기 때문에 JavaScript 파일이 무거워지며 첫 화면 로딩 시간이 길어진다.
  2. 검색 엔진 최적화가 좋지 않다.

2. React Router

 SPA는 하나의 페이지에 여러 화면이 필요하다. (예를 들어 트위터에는 메인 트윗 모음 페이지, 알림 페이지 등이 필요할 것이다.) 그리고 이러한 화면에 따라 주소가 달리지는데, 다른 주소에 따라 다른 뷰(화면)을 보여주는 과정을 라우팅(Routing)이라 한다. 그리고 이를 위해 React Router라는 라이브러리를 이용한다. React Router에서 자주 쓰는 컴포넌트들은 다음과 같다.

  • BrowserRouter: 라우터 역할
  • Routes: Route를 감싸며 경로를 매칭해줌. 세세한 경로는 Route를 통해 매칭
  • Route: Routes의 자식 컴포넌트로, path를 통해 경로 설정 가능
  • Link: 경로를 변경함. to를 통해 경로를 변경 가능

3. State & Props

 Props란 컴포넌트의 속성(Property)를 뜻하며, 이는 외부(부모 컴포넌트, 상위 컴포넌트)로부터 전달받은 값이다. 또한, 이는 객체 형태이며 읽기 전용이다. Props를 이용하는 예는 다음과 같다.

function Parent() {
  return (
    <div className="parent">
      <h1>Parent!!!</h1>
      <Child key이름아무거나={"아무값을준다"}/>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
    	<p>{props.key이름아무거나}</p>
    </div>
  );
};

 State란 컴포넌트 내부에서 변할 수 있는 값이다. 예를 들어, 쇼핑몰에서 장바구니에 담긴 물건이 State의 예시가 될 수 있다. State는 useState를 통해 보다 쉽게 이용할 수 있다. useState 배열에서 첫 번째 요소는 값이며 두 번째 요소는 이 값을 변경시키는 함수이다. 

const [value, setValue] = useState(1);
setValue(prev => ++prev);

4. 이벤트 처리

 React의 이벤트 처리 중, 자주 사용되는 것들이다.

  1. onChange: <input>, <textarea>, <select> 등과 같이 사용자의 입력값을 제어하는데 사용되는 Form 엘리먼트에서 입력값이 변경될 때 발생한다. onChange 이벤트가 발생하면 event.target.value를 통해 객체 속의 input 값을 읽어올 수 있다.
  2. onClick: 사용자가 클릭하였을 때 발생한다.