[TIL] 리액트 ( ROUTER & SCSS )

router&scss 표지

0. 라이브러리  VS  프레임워크

라이브러리(Library)
라이브러리는 단순 활용가능한 도구들의 집합
즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 취하고 있다.

Framework(프레임워크)
프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술  
객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법 중 하나라고 할 수 있다.
※ 프레임워크의 특징
특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있다.  
컴포넌트들은 재사용이 가능하다. 
높은 수준에서 패턴들을 조작화할 수 있다.

 

간단히 정리해 보면 라이브러리는 그냥 함수들이나 기능 모음을 가져다가 쓰는 것이고 프레임워크는 특정 디자인 패턴이나, 전처리 후처리에 필요한 동작과 기능들을 수행하기 위해서 프레임워크가 실행되다가 중간 중간에 특정 비지니스나, 특정 구현 단에서만 사용자의 코드를 lookup(검색)하여 사용하는 형태라고 할 수 있다.

라이브러리&프레임워크

1. Router ( 라우터 ) 란 ..?

리액트는 SPA (Single Page Application) 방식으로써,
여러 개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA 방식과 달리
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
​
예를 들어, 최근에 만든 인스타그램 클론 코딩 과제를 보면 
로그인과 메인 화면을 구성한다고 가정했을 때 
​
MPA 방식에서는 로그인.html 페이지와 메인.html 페이지가 별도로 나눠져 있고
사용자가 회원가입 버튼을 누름에 따라 로그인.html 에서 메인.html 로 페이지를 이동하는 방식을 가진다.

( 리액트 자체에는 이러한 기능이 내장되어있지 않다. 리액트가 Framework 가 아닌 Library 로 분류되는 이유이다. )

MPA 방식

SPA 방식에서는
오직 하나의 html 페이지 안에서 로그인과 메인에 대한 데이터 js 파일을 가지고
사용자가 로그인 버튼을 눌렀을 때, 로그인한 사용자의 메인페이지에 대한 데이터 자료를 렌더링하는 방식이다.

SPA 방식

즉, 둘의 차이는 단순하게
" 현재의 페이지를 완전히 다시 로드해서 새로 구성을 하느냐
아니면 필요한 데이터만 가지고 와서 재로드 없이 렌더링하느냐의 차이 "이다.
​
이러한 방식은 Router 에서도 확인할 수 있는데
위의 그림과 같이 MPA 방식에서 다른 페이지로 이동하기 위해선
주로 <a href=''> 태그를 사용하거나 window.location.href 등의 메소드를 사용할 수 있다.
페이지와 페이지 사이 (html → html)의 이동이 가능하기 때문이다.
​
그러나 SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에
MPA 방식으로의 페이지 이동이 불가능하다.
페이지 (html)가 아닌 데이터를 가지는 JS 파일로 구성이 되어 있기 때문이다.
​
※ React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를
하나의 페이지에서 렌더링 해주는 라이브러리이다.

"react-router"를 사용하면 싱글 페이지 애플리케이션과 같이 페이지 깜박임이 없으면서도 주소를 가질 수 있게 된다. "react-router"를 적용한 홈페이지의 예를 보면 알 수 있다. 일반 홈페이지는 페이지를 넘길 때 페이지가 깜박이면서 다음으로 넘어가지만, "react-router"를 적용한 홈페이지는 레이아웃은 고정되어 있고 내용만 바뀐다. 이에따라 주소도 바뀐다. 이것을 가능케 하는 것이 react-router 이다.

1 - 1.  react-router 설치

라우터 설치 방법

1 - 2. Router 컴포넌트 구현하기

라우터 컴포넌트 구현하는 법

1 - 3. index.js

index.js에 쓸 코드

• 현재 화면에는 <App /> 컴포넌트가 보여지고 있다. (또는 Login 컴포넌트, Main 컴포넌트)
• CRA로 만든 앱에 routing 기능을 적용하려면 index.js 를 수정해야 한다.
• <App /> 컴포넌트 대신에 routing을 설정한 컴포넌트(<Router />)로 변경해야 한다.

1 - 4. React Router-Dom ?

React는 SPA(Single Page Application)입니다. 
react-router-dom은 SPA에서 화면 전환을 위해 사용하는 모듈입니다.

---

2. SCSS (사스) 란 ..?

scss

CSS는 상대적으로 배우기 쉽고 재밌지만, 작업이 고도화될수록 불편함도 커진다.
불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커진다.
이런 불편한 CSS를 대체할 수 있는 CSS의 확장판 SCSS(사스)가 있다.

2 - 1. SCSS 개념 및 장점

// 일반적인 CSS 코드
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 // 같은 코드를 SCSS로 구현했다
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

위의 코드로 명확한 차이가 구분이 되듯, 셀렉터 안에 셀렉터를 넣어 중첩을 시켜 가독성이 좋아졌다. 이렇게 중첩시키는 것을 nesting(네스팅)이라한다. 겨우 몇 줄 안 되는 부분에서 보이는 장점인데, 만약 훨씬 긴 코드에서는 더욱 명확하게 보이는 장점이 될 것이다. HTML처럼 계층적인 구조를 SCSS로 구현하여 HTML 보듯 자연스럽게 볼 수 있다는 것이 바로 SCSS의 장점이 되겠다.

2 - 2. SCSS 와 CSS의 차이점

CSS의 태생적 한계를 보완하기 위해 Scss는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

CSS와 비교하여 SCSS는 다음과 같은 장점이 있다. CSS보다 심플한 표기법(Nesting)으로 CSS를 구조화하여 표현할 수 있다.
CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

2 - 3. SASS와 SCSS의 차이점

SCSS는 Sassy CSS(멋진 CSS)의 줄임말이고 SASS는 Syntactically Awesome Style Sheets (문법적으로 짱 멋진 스타일시트)의 줄임말이다. 문법을 포함한 여러 차이점이 있지만 간단히 요약하자면 SASS보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다.

// SASS 코드 사용 예시
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

// SCSS 코드 사용 예시
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

① 둘의 간단한 차이는 { } (중괄호)와 ; (세미콜론)의 유무다.
*sass는 중괄호와 세미콜론을 가지고 있지 않다.

② 또 다른 차이는 Mixins('믹스인'은 재사용 가능한 기능을 만드는 방식을 의미한다.)
sass는 = 와 + 기호로 Mixins 기능을 사용했다면 scss는 @mixin과 @include로 기능을 사용했다.