TIL - 21.07.09 👨‍💻

React SPA (Single Page Application)

싱글 페이지 어플리케이션.
한 페이지에서 지지고 볶고 하는 웹페이지를 뜻한다고 생각하면 될 듯 하다.
조금 풀어서 말하면 중복되는 요소가 다시 로딩됨으로 생기는 트래픽과 느린 페이지 업데이트 속도를 정보가 업데이트 된 부분만 다시 로딩하는 것으로 해결한 웹사이트나 웹 어플리케이션을 말한다.

장점으로는

1. 전체 페이지를 업데이트 하는 것이 아닌 갱신이 필요한 부분만 업데이트 하면 되기에 더 빠른 반응성을 가지고 있으며,

2. 서버 입장에서도 전체 데이터가 아닌 일부만 전송하므로 트래픽 부분에서 이점이 있다.

3. 그로인해 최종적으로 웹 페이지, 웹 어플리케이션을 이용하는 유저들에게 더 나은 경험을 제공할 수 있다.

장점이 있으면 단점도 있는 법.

1. 리액트는 모든 데이터가 JavaScript 파일 안에 있어서 당연히 js 파일의 크기가 커지고 그로인해 최초 업데이트시 시간이 많이 소요된다.

2. 검색 엔진 최적화에 좋지 않다.
   이것 역시 데이터가 자바스크립트 파일에 저장되어있어서 생기는 단점인데, 검색 엔진은 보통 HTML의 정보를 검색 하게 되는데 SPA는 상술한 것 처럼 HTML에는 별 정보가 없고 js파일에 데이터가 담겨있기에 정보를 제대로 검색하지 못한다.
   다만 최근 검색엔진들은 개선되고, 되고 있어서 해당 단점은 사라지는 추세이다.

React Router DOM

Routing(라우팅)이란, 다른 주소에 따라 다른 뷰를 보여주는 과정을 경로에 따라 변경한다는 의미이다.

리액트에서 주로 사용하는 React Router DOM의 주요 컴포넌트는 세가지로 나눌 수 있는데,

1. 라우터 역할을 하는 <BrowserRouter> 컴포넌트
2. 경로를 매칭해주는 <Switch>와 <Route> 컴포넌트,
3. 그리고 매칭된 경로로 페이지를 연결하는 <Link> 컴포넌트

이렇게 나뉜다.

• BrowserRouter는 라우터를 사용하고자 하는 컴포넌트 상위에서 감싸거나 해당 컴포넌트 최상위에서 <BrowserRouter></BrowserRouter> 태그로 나머지 태그들을 감싸줘야한다.

• Switch 컴포넌트는 여러 Route 컴포넌트를 싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜준다.
  Switch를 사용하지 않을 수는 있지만 그 경우 매칭되는 모든 요소를 렌더링한다.

• Route 컴포넌트는 path 속성을 지정해서 해당 path에 어떤 컴포넌트를 출력할지 정해주고 후술할 Link 컴포넌트가 정해주는 URL 경로가 일치할 경우 Route 컴포넌트로 지정한 컴포넌트가 호출된다.

• Link 컴포넌트는 경로를 연결해주는 역할을 하는 컴포넌트이다.
  페이지를 새로 불러오지 않고 앱을 유지하며 HTML5 History API를 이용해 페이지 주소만 바꾸어 준다.
  React DOM으로 렌더하면 Link컴포넌트는 DOM에서 a태그가 된다.

어차피 바뀌면 뭐하려 Link를 쓰나요?

a태그는 페이지 전환시 페이지를 새로고침하지만 Link 컴포넌트는 새로고침 방지 기능이 내장되어 있어 SPA 구현이 가능하다.

React Router DOM 프로세스 개괄

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


// Home, Page1, Page2 는 컴포넌트로 다른 js파일에 작성하고 임포트 받아와서 써도 된다.
// 실제로 그렇게 많이쓰고
// Home, Page1, Page2 이 세 컴포넌트를 다른 컴포넌트에서 불러오고 싶으면 
// 얘들도 export 시켜주고 사용할 컴포넌트에서 import 해주면 된다.
const Home = () => {
  return <h1>Home here!</h1>
}

const Page1 = () => {
  return <h1>Page 1 here!</h1>
}

const Page2 = () => {
  return <h1>Page 2 here!</h1>
}

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <ul> 
          // 하기 Link 컴포넌트의 to 속성 값과 일치하는 path 속성값을 가진 Route 컴포넌트가 렌더된다.
          <li>
            <Link exact to='/'>Home</Link> 
          </li>
          <li>
            <Link to='/1'>Page 1</Link>
          </li>
          <li>
            <Link to='/2'>Page 2</Link>
          </li>
        </ul>

        <h1>Hello!</h1>
           // Route 들을 묶는다. 
        <Switch> 
          // exact 속성을 사용하면 path 값과 정확히 일치하는 to 속성 값을 가진 Link 컴포넌트와 매칭된다.
          // 사용하지 않으면 '/' 들어간거 다 이 녀석이랑 매칭된다.
          // path 값이 '/'인 Route 컴포넌트를 가장 하단으로 내리면 없어도 되긴한다.
          // 근데 이거 쓰고 작성하는게 더 보기 편하니 그냥 쓰자.
          <Route exact path='/'>
            // Route 컴포넌트에 path 속성을 지정하지 않으면 모든 / 이후에 무슨 문자가 와도
            // 해당 페이지로 리다이렉트된다.
            <Home />
          </Route>
          <Route path='/1'>
            <Page1 />
          </Route>
          <Route path='/2'>
            <Page2 />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  )
}
export default App
// default 붙으면 default 뒤에오는 컴포넌트 하나만 export 하는거고
// 두개 이상 컴포넌트를 한 js 파일에서 export 하려면
export { Home, App }
// 이렇게 중괄호써서 export 해주면 된다.
export default function ComponetName() {
  return
}
// 이런 식으로 한번에 쳐내기도 하는데
// 화살표 함수식 쓰면 defalut 쓰면서 export 몬한다.
// defalut 빼고 선언하고 export 해야함.

이벤트 처리

감지하는 이벤트는 자바스크립트와 같으며, 사용법은 두가지가 있다.

1. export할 함수 내부 return문 밖에 함수 만들고 onClick={function}으로 연결하기.
2. onClick={() => console.log('some action')} 와 같이 속성 값에 이벤트로 실행할 함수 입력하기.
3. 1번과 2번의 하이브리드로 함수따로 만들고 속성 값에 연결한 뒤 인자만 넘겨주기.

// 1번
export default function App() {
  const func = () => {
    console.log('It\'s Working!')
  }
  return <button onClick={func}> Hello! </button>
}

// 2번
export default function App() {
  return <button onClick={() => console.log('It\'s Working!')}> Hello! </button>
}

// 3번 
export default function App() {
  const func = () => {
    console.log('It\'s Working!')
  }
  return <button onClick={() => func()}> Hello! </button>
}

// 3번은 onClick 보단 onKeyup이나 onChange 같은걸로 텍스트 박스 값 가져올때 유용하다.

state, useState 개괄

• useState는 구조 분해 할당을 응용한다.
• 사용전 import { useState } from 'react'로 useState 활성화시켜준다.
• 대략적인 문법은 const [state, setState] = useState(default) 이다.
• 0번 인덱스는 state, 변수 자리이고 1번 인덱스는 state를 변경하는 함수, setState이다.
• setState는 반환 값을 state에 할당하는 함수이다.
• state는 같은 컴포넌트를 여러개 쓰더라도 값이 각각 저장된다. 그는 신인가

props (property) 개괄

• props는 컴포넌트를 호출할때 호출하는 태그 안에 프로퍼티키와 값을 입력함으로써 호출하는 컴포넌트 안으로 해당 프로퍼티 키와 값을 사용할 수 있게 해준다.

• <App key={value} /> 와 같은 방식으로 사용하며 값을 받은 해당 컴포넌트의 매개변수 자리에 할당 받을 문자를 적으면 해당 컴포넌트에서 사용가능한 객체 형태로 받는다.

• 매개변수는 주로 props를 이용한다.

• props의 값은 받은 컴포넌트에서 수정할 수 없다.

GOOD 😉

리액트 라우터, 스테이트, 프롭스, 이벤트 쓰는 법을 대략 익혔다.
리액트랑 조금 친해진 느낌이다.

BAD 😥

어려워

TO DO 🔥

주말에 할 것!

• React
  • 노마드코드 리액트 클론코딩
  • 생활코딩 리액트 부분
  • 코딩앙마님 강좌 모두 보기
• 알고리즘 15 ~ 20

Retrospect 🧐

코린이 입장에서 봐도 뭐가 뭔지는 잘 모르겠지만 대충 파악할 수 있게 해주고
데이터도 파일 안에서 관리해주고
모듈마냥 여기 저기 쓸 수 있고
.
.
.
리액트는 신인가?

Reference 🙇

코딩앙마님 유튜브 - https://www.youtube.com/channel/UCxft4RZ8lrK_BdPNz8NOP7Q
https://developer.mozilla.org/