*🔐Study Keyword :

리액트의 라이브러리인 🔑Sass와 🔑React Router를 써보자

- 들어가기에 앞서

1. 리액트에서 써드 파티 라이브러리가 가지는 의미에 대해서
2. 리액트에서 라우팅 기능이 뭐고 왜 필요한지
3. css 파일에서 작성한 스타일 코드가 리액트에서는 어디에서 어떻게 적용되는지 이해
4. sass가 css와 어떤 어떤 차이가 있는지 이해하고 sass가 css의 어떤 단점을 해결해주는지
5. sass에서 nesting, extend, 변수 등을 활용하여 스타일링하는 법까지 알고 내일 대답해보기!

- Third-party library

• Third, 제3자로서 다리의 역할을 하며 보다 효율적인 개발을 위해, 프로그래밍 개발에 있어 개발자가 사용하는 플러그인이나 라이브러리 또는 프레임워크등 Third-party library라고 라이브러리 부른다.
• React는 라이브러리로 내장된 기능들이 프레임워크에 비해 부족하지만 다양한 Third-party library를 사용이 가능하다는 유연한 면을 갖고 있다.

- Sass

• Sass는 css에 다양한 편리함과 기능을 더해주는 CSS의 확장이다.
• 전처리기라고도 부르는데 이는 CSS 문법과 굉장히 유사하지만 1>선택자의 중첩(Nesting)이나 2>조건문, 3>반복문, 4>다양한 단위의 연산 등에 CSS보다 훨씬 많은 기능을 제공하여 편리하게 작성 할 수 있게 도와준다.
• 즉, SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합을 뜻하기도 한다.

1. SCSS는 선택자의 유효범위를 {}로 구분한다.

<style>
nav {
      @extend %flex-row-space-between;
      align-items: center;
      position: sticky;     
      #title {
        @extend %webucks-logo-style;
      }
      #navMenus {
          display: flex;
          justify-content: space-evenly;
</style>

3. $변수: 속성으로 묶어줄 수 있다.

<style>
$input-font-color:#9b9696;
#loginUserId,
#loginUserPsw {
  @include input-IdAndPsw-FontSize-Color($input-font-color);
  &::placeholder {
    @include input-IdAndPsw-FontSize-Color($input-font-color);
  }
}
</style>

3. Nesting 기능 적용하기

• Sass는 중첩 기능을 사용하여 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성하다.

<style>
.Login {
  .loginWindow {
    @extend  %flex-column;
    background-color: $default-white;
    border: 5px solid $windowAndInput-border-color;
    @include border-radius(10px); 
    &Title {
      @extend %logo-style;
    }
    &InputBox {
      @extend  %flex-column;
    }
    &FindUserPsw {
        @extend  %flex-column;
    }
  }
}
</style>

4. Ampersand (상위 선택자 참조)

• 중첩 안에서 & 키워드를 쓰면 상위(부모) 선택자를 참조하여 치환가능하다.

<style>
#loginWindow {
    @extend  %flex-column;
    @include border-radius(10px); 
    .title {
      @extend %logo-style;
    }
    .userInputBox {
      @extend  %flex-column;
      #userLoginPsw,
      #userLoginId {
        @include input-IdAndPsw-backGround-border-Color($windowAndInput-border-color);
        @include border-radius(5px); 
        @include input-IdAndPsw-FontSize-Color($input-font-color);
        &::placeholder {
          @include input-IdAndPsw-FontSize-Color($input-font-color);
        }
      }
</style>

4_2 상위 선택자 참조 &의 응용

• & 키워드를 참조하면 상위 선택자로 치환되는 것이기 때문에 변수처럼 응용할 수도 있도 있다.

<style>
.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}
</style>

5. @inmpot도 CSS처럼 import가 가능하다.

• CSS와 다른점은 부모로 모아지는 scss파일에 하나로 모아진 후 하나의 CSS로 만들어진다.

<style>
import './TopNav.scss'
</style>

6. Mixins기능을 사용하면 재사용 가능한 기능을 만드는 방식을 사용할 수 있습니다

• SCSS는 @mixin과 @include로 기능을 사용가능하다.
• 자주 쓰이는 스타일을 믹스인 기능으로 한번 지정해준 스타일을 여러번 불러올 수 있다.

<style>
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
    -ms-border-radius: $radius;
        border-radius: $radius;
}
#loginWindow {
  @extend  %flex-column;
  @include border-radius(10px); 
#userLoginPsw,
#userLoginId {
      @include border-radius(5px); 
      &::placeholder {
          font-weight: $input-bolder;
      }
</style>

6_1. Mixins에 인자값을 넣을 수도 기본값을 넣어 사용할 수 있다.

<style>
@mixin btn-background-border-Color($Color: lightsteelblue) {
  border: 3px solid $Color; 
  background-color: $Color;
}
#loginUserBtn {
    @include btn-background-border-Color($Color:lightsteelblue);
    @include border-radius(10px);     
    &.changeBtnColor {
      @include btn-background-border-Color($Color:steelblue);
    }
  }  
</style>

7. Extend, 중복되는 스타일에서 속성값만 다른 클래스에 대해 작성가능하다.

• extend 사용한 클래스들을 콤마로 묶어서 하나의 스타일로 출력해준다.

<style>
.input{font-size:10px}
.input2 {
@extend .input
font-size: 20px
}
.input3 {
@extend .input2
font-size: 30px
}
</style>

8. %, 사용해 id, class 처럼 이용 가능하다

<style>
%size{font-size:10px}
.input2 {
@extend $size
}
</style>

mixins vs extend 차이

• 공통된 스타일을 클래스마다 넣어서 적용할 땐 mixin
• 클래스를 하나로 묶어 한번에 스타일을 선언하여 적용할 땐 extend

- Routers

• Routers는 다른 경로에따라 다른 화면을 보여주는 것이 라우팅이다
• 개발자가 안에 들어가 있으면 프레임워크이고 개발자가 직접 사용하면 라이브러리로 리액팅의 라우터 기능을 위한 라이브러리가 바로 Routers다
• 라우트는 위에서부터 하나씩 경로를 찾는다
• 만약 모든 걸 다 탐색하여 발견하지 못할 때 보여질 페이지 404를 리턴하는 컴포넌트를 가장 밑에 넣어주면된다.

<script>
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import List from './pages/List/List';
import Detail from './pages/Detail/Detail';
class Routes extends React.Component {
  render() {
		return (
	    <Router>
	      <Switch>
					<Route exact path="/login" component={Login}/>
	        <Route exact path="/list" component={List} />
	        <Route exact path="/detail" component={Detail} />
	      </Switch>
	    </Router>
	  )
	}
}
export default Routes;
</script>

-routes.js파일

• exact path에 내가 가고자하는 페이지의 경로를 다음과 같이 "/login" 지정해준다.
• component={Login}에는 내가 import(import Login from './pages/Login/Login')하여 가져온 컴포넌트로 나눈 페이지 js를 넣어준다.

<script>
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/reset.scss'
import './styles/common.scss'
import Routes from "./Routes"
ReactDOM.render(
  <Routes />,
  document.getElementById('root')
);
</script>

• index.js파일에 라우트터 컴포넌트로 묶어준 Routes 파일을 import해주면 끝!!

withRouterHOC로 Link Component 구현

<script>
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
  goToMain = () => {
    this.props.history.push('/main');
  }
 ** // 실제 활용 예시
  // goToMain = () => {
  //   if(response.message === "valid user"){
  //     this.props.history.push('/main');
  //   } else {
  //     alert("너 우리 회원 아님. 가입 먼저 해주세요")
  //     this.props.history.push('/signup');
  //   }
  // }
  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}

          로그인
        </button>
      </div>
    )
  }
}
export default withRouter(Login);
</script>

• <Link />를 사용하지 않고 요소에 onClick 이벤트를 통해 페이지를 이동할 수 있다.
• goToMain event handler에서 구현한 것처럼 props 객체의 history (this.props.history) 에 접근해서 이동할 수 있다.
• 받은 history의 push 메서드의 인자로 Routes.js 에서 설정한 path를 넘겨주면, 해당 라우트로 이동한다.
• 이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(history)를 받으려면 export하는 컴포넌트에 withRouter로 감싸줘야하고 이를 Higher Order Component (이하 HOC)라고 부른다.

*💡conclusion

• 정리해보는 것보다 직접쓰면서 익숙해지자아!

#📑Study Source

장현 멘토님의 깔끔 강의 중:)