[코드 스테이츠] 28일차, "4주차 복습 (2)"

---

[ 오늘의 TODO ]

1. 코드 스테이츠) 목~금 내용 복습
   // React SPA
   // React State & Props
   // sprint Advanced 
2. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
3. 생활) 물 1L 이상 마시기
4. 생활) 수-토-일 운동 
   // 공부하느라 운동할 시간 없어. 허튼 핑계 아니야. 진심이야.

---

[ 오늘의 복습 ]

1. React SPA

  1-1) SPA 란?

  SPA 는 Single Page Application의 약자다. 이전에 페이지를 넘어갈 때면 HTML을 완전히 새것으로 바꾸는 작업을 했으나 현재는 이 SPA를 통해 업데이트에 필요한 데이터만을 가져오는 방식이 개발됐고 보편화됐다.

 

  많은 데이터를 가져오지 않으므로 사용자의 행동에 빠르게 반응하며, 서버 과부하의 위험이 줄어든다. 

 

  반면, 검색 엔진의 경우 HTML에 자료가 가득 담겨 있어야 검색 로봇이 정보를 수집하는데 자료가 HTML에 있지 않으므로 잘 동작하지 못한다. 현재는 이 부분을 많이 개선한 상태라고 한다.

 

 

  1-2) Router

  Routing이란 주소마다 다른 뷰를 보여주는 것을 의미한다. React에 내장된 기능은 아니고 React Routing이라는 라이브러리를 설치해서 사용해야 한다.  라이브러리 설치 방법은 npm으로 다음의 명령을 실행하면 된다.

$ npm install react-router-dom

 

  React에서 Routing을 하기 위해선 주로 네 가지의 컴포넌트가 필요하다

import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

 

    1-2-1) BrowseRouter

  Routing을 하겠다는 의미다. index.js에 넣어서 활용해도 되고, 꼭 index.js가 아니라 해도 렌더 단계인 곳에서 활용해주면 되며 상위에 작성한다.

 

    1-2-1) Switch 

  여러 Route를 감싼다. 그리고 그 중 Link 경로가 일치하는 단 하나의 Route만 렌더링 시킨다. 이름대로 경로를 Switch 한다고 생각하면 된다. 

 

    1-2-3) Route 

  path 속성을 통해서 경로를 설정한다. 여기서 exact라는 속성도 있는데 만일 '/' 경로와 '/foo', '/foo/idio' '/foool' 경로가 있을 때 컴퓨터는 '/foo'와 '/foool' 은 다른 경로로 보지만 '/foo' 와 '/foo/idio'를 같은 경로로 보고, '/' 과 나머지 세개를 같은 경로로 본다. 이때 exact 속성을 부여하면 정말 정확하게 같아야 한다는 의미를 전달해서 위의 네 경로를 모두 다른 것으로 구분한다. 

    1-2-4) Link 

  to 속성을 사용해서 경로를 연결해준다. 페이지를 전환할 때 새로운 페이지를 불러오지 않고 애플리케이션을 그대로 유지해준다. 

 

2. state와 props 

  간단하게 설명하면 state는 내부에서 정하여 계속해서 변할 값, props는 외부로부터 전달 받아 바뀔 수 없는 값이다.

  

  2-1) Props

  컴포넌트의 속성이다.

 

  부모 컴포넌트(외부)로부터 전달 받은 값이다. 인자처럼 받아오며 컴포넌트가 최초 렌더링할 때 출력하고자 하는 데이터를 담은 초기값으로 사용한다. 내부에서 수정이 불가능하다. 

 

  Props는 세 단계로 적용된다

1. 하위 컴포넌트에 전달할 값, 속성을 부모 컴포넌트에서 정의한다.
2. props로 정의된 값과 속성을 전달한다.
3. 전달 받은 props를 자식 컴포넌트에서 렌더링한다.

  React에서는 속성 및 값을 할당할 때 중괄호로 묶어줘야 한다.

 

<Hello attributeName = {value} />

 

 props는 객체의 형태로 존재한다. 그렇기에 구조 분해 할당할 때 중괄호로 가져오던가, 아니면 애초에 props 자리에 { } 를 넣어서 구조 분해 할당으로 가져오면 된다.

 

// props 로 name, text를 가져왔다 할 때

function Child (props) {
  const { name, text } = props
}

// 혹은

function Child ({ name, text }) {

}

 

  추가적으로 props에는 children 이라는 prop이 있으며 여는 태그와 닫는 태그 사이의 모든 내용을 가져온다.

 

  2-2) State

  애플리케이션의 상태를 의미한다. 컴포넌트 내에서 변하는 값들을 State로 다룬다. (예를 들면 체크 박스 등)

 

  React가 State를 통제할 수 있는 방법 중 하나로 Hook을 사용하는 것인데 State hook 으로 useState 가 있다.

 

  useState를 하기 위해선 다음의 과정이 필요하다

1. import를 통해서 가져오기
   

   import React, {useState} from 'react';​

2. useState룰 컴포넌트 안에서 호출하기
   

   const [state저장변수, state갱신함수] = useState(state저장변수초기값)​

3. 한 가지 주의점이 있다면?
   React 컴포넌트는 State가 변경될 때마다 리렌더링된다. React State 상태 변경함수 호출(onChange, onClick 등)로 변경을 해야 하며 강제로 변경을 시도하면 리렌더링되지 않거나 state가 제대로 바뀌지 않는다. 

 

3. React의 흐름

  리액트 개발의 가장 큰 특징은 컴포넌트 단위로 작성한다는 것이다. 컴포넌트 단위로 작성했을 때의 장점은 재사용이 가능하고 에러가 났을 때 어느 컴포넌트에서 발생한 건지 쉽게 확인할 수 있고 그 컴포넌트를 수정하면 되므로 유지 보수도 쉽다.

 

  React는 컴포넌트를 만들고 그 컴포넌트(UI 조각)를 가지고 페이지를 조립한다. 이는 상향식의 방법이며 테스트가 쉽고 확장성이 좋다.

 

  하지만 데이터는 경우가 다르다. 컴포넌트 바깥에서 props 를 통해 데이터를 인자처럼 받는다. 다시 말해, 데이터를 전달하는 것은 부모 컴포넌트가 되고 데이터는 위에서 아래인 하향식의 방법이 된다.

 

  React의 가장 큰 특징 중의 하나는 이렇게 단방향 데이터 흐름(one-wat data flow) 이라는 것이다. 이는 하향식이기에 props를 전달 받아도 어느 컴포넌트로부터 왔는지 알 수 없다는 특징이 있다.