[웹 3팀] 3. 리액트 구글 웹 폰트, 조건부 렌더링 / 웹 3팀 프로젝트의 페이지 구성(리액트 라우터)

리액트에 구글 웹 폰트 적용하기

1. 아래 사이트에서 사용하고 싶은 폰트를 고른다.

https://fonts.google.com/

Google Fonts

2. 원하는 글꼴 선택 - Select this style - Selected family - @import

3. 리액트에 적용하기

페이지 상단에 보여지는 header.js의 제목, 메뉴 이름에 폰트를 적용하려고 한다.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './header.css';

class header extends Component {

  constructor(props) {
    super(props);
    this.login = true;
  }

  render() {
    return (
        <div className='header_grid'>
            <div> </div>
            <div className='acenter'>
              <Link className='link_tit' to='/'> <h1> 설문폼폼폼 </h1> </Link>
              <div className='link_button'>
                  {this.login
                  ? <Link className='link_survey' to="/write"> 설문조사 올리기 </Link>
                  : null
                  }
              </div>
              <br/>
              <div className='link_service'>
                  <Link className='link_select' to='/service'> 서비스소개 </Link> | 
                  <Link className='link_select' to='/survey'> 설문조사 </Link> |
                  <Link className='link_select' to='/qna'> Q&A </Link> |
                  <Link className='link_select' to='/login'> 로그인 </Link> |
                  <Link className='link_select' to='/signup'> 회원가입 </Link> 
              </div>
            </div>
        </div>
    );
  }
}

export default header;

앞서 2에서의 @import 내용을 header.css의 앞부분에 복붙하고,

글꼴 설정이 필요한 link_tit, link_select, link_survey에 2의 @import 아래 CSS rule에 따라 font-family를 수정해주었다.

@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');

.header_grid {
    display: grid;
    border-top : solid 3px #232B43;
    border-bottom : solid 3px #232B43;
  }
  
.acenter { 
  padding-top: 15px;
  background-color: #e0eaf6;
  text-align : center; 
}

.btn_cursor {
  cursor : pointer;
}

.link_tit {
  font-size: 27pt;
  font-family: 'Gamja Flower', cursive;
  color : black;
  text-decoration: none;
}

.link_service {
  text-align : end;
  padding-right: 10px;
}

.link_button {
  text-align : end;
  margin-top: -60px;
  padding-right: 10px;
}

.link_select {
  color : black;
  font-family: 'Gamja Flower', cursive;
  font-size: 18pt;
  text-decoration: none;
}

.link_survey {
  color : white;
  font-family: 'Gamja Flower', cursive;
  background-color: #232B43;
  padding : 10px;
  font-size: 20pt;
  text-decoration: none;
}

글꼴과 버튼 모양 등 css만 조금 수정했을 뿐인데 훨씬 보기좋은 페이지가 완성되었다.

---

리액트에서의 조건부 렌더링

위의 header.js에서 [설문조사 올리기] 버튼이 로그인 하기 전에는 보여지지 않다가 로그인 하면 보여지도록 기능을 추가하려고 한다. 이 때 사용할 수 있는게 조건부 렌더링으로 React reder시 특정 조건에 따라 동작을 하게 하는 것이다. 

여기서는 삼항 연산자를 이용하여 조건을 주었는데,

조건 ? 참 : 거짓

조건이 참인 경우 참 부분이, 거짓인 경우 거짓 부분이 return 된다.

<div className='link_button'>
	{this.login
	? <Link className='link_survey' to="/write"> 설문조사 올리기 </Link>
	: null
	}
</div>

아직 로그인 기능이 완성되기 전이라, this.login을 true/false로 주며 기능을 확인했다.

true인 경우

false인 경우

이는 나중에 로그인 기능이 완성되면,

로그인/로그아웃 등 로그인 여부에 따라 변화하는 기능을 구현하는데 유용하게 쓰일 수 있다.

---

웹 3팀 프로젝트, 페이지 구성

github.com/hyeju1123/webStudy3-toyProject

hyeju1123/webStudy3-toyProject

src
|   │
|   ├── authentication
|   │     ├── LogIn.js
|   |     ├── LogIn.css
|   |     ├── SignUp.js
|   |     └── SignUpResult.js
|   ├── inc
|   │     ├── header.js
|   │     ├── header.css
|   │     └── index.js
|   ├── page
|   │     ├── detail.js
|   │     ├── info.js
|   │     ├── info.css
|   │     ├── List.js
|   │     ├── List.css
|   │     ├── ListItem.js
|   │     ├── ListItem.css
|   │     ├── main.js
|   │     ├── main.css
|   │     ├── qna.js
|   │     ├── read.js
|   │     ├── read.css
|   │     ├── service.js
|   │     ├── write.js
|   │     └── index.js
|   ├── App.js
|   ├── App.css
|   ├── index.css
|   └── index.js

- authentication : 회원가입, 로그인 기능의 파일들

- inc : 고정 헤더 부분

- page : 이 외의 기능 page 컴포넌트들

리액트 라우터 (React-Router)

리액트는 SPA(Single Page Application) 방식으로,

여러 페이지로 구성되어, 유저의 요청에 따라 새로운 페이지를 로드하는 MPA(Multi Page Application) 방식과 달리

하나의 페이지에서 필요한 데이터만 전달받아 재로드 없이 렌더링 해준다.

이 과정에서 SPA는 구조 상 단일 페이지이기 때문에

보여지는 페이지 모습은 달라져도 주소는 달라지지 않는, 페이지 간 이동 시 주소의 문제가 발생한다.

이러한 라우팅 문제를 해결해주기 위해 React-Router 라이브러리가 등장했다.

리액트 라우터 핵심 컴포넌트

Link 컴포넌트

html의 <a> 태그와 유사한 기능을 하는 컴포넌트로, to를 통해서 이동할 경로를 지정해준다. 이 코드는 클릭이 가능한 Main으로 렌더링되고, 클릭하면 경로가 /main으로 갱신된다. 네비게이션 바를 구현할 때 주로 사용되며 우리 프로젝트에서는 header.js에서 상단에 위치한 네비게이션 바를 구현할 때 사용되었다.

<Link to="/main"> Main </Link>

Route 컴포넌트

<Route>는 현재 주소 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용한다. path를 통해서 매치시킬 경로를 지정하고, componet를 통해서 보여줄 컴포넌트를 할당한다.

<Route path="/login" component={LogIn} exact/>

위 코드는 경로가 /login인 경우 LogIn 컴포넌트를 보여준다. 현재 주소 URL 경로에 따라 특정 컨텐트를 보여주거나 숨기기 위해 사용한다. exact 속성은 해당 태그의 path 값이 다른 경로와 중복되지 않고 완전한 경로로 사용되게 한다. 우리 프로젝트의 App.js에서 경로에 따라 보여지는 컴포넌트를 다르게 하기 위해 사용되었다.

Router 컴포넌트

여러 <Router> 컴포넌트 종류 중 <BrowserRouter>를 index.js에서 사용해 라우터를 적용했다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 +) inc/index.js, page/index.js에 대해

페이지들을 한 곳에 모아줄 index.js를 생성하고 export를 통해 가져온 객체를 내보내기 한다.

export { default as Main } from './main';
export { default as Service } from './service';
export { default as Qna } from './qna';
export { default as Write } from './write';
export { default as Info } from './info';
export { default as Read } from './read';

아래와 같이 import해 해당 기능을 사용한다.

import React, { Component } from 'react';
import { Head } from './inc';
import Write from './page/write';
import Detail from './page/detail';
import { Main, Qna, Info } from './page';
import LogIn from './authentication/LogIn';
import SignUp from './authentication/SignUp';
import SignUp_Result from './authentication/SignUpResult';

 

---

blog.naver.com/sejun3278/221797203201

React로 블로그 만들기 14 : 리액트 라우터 (React Router. 1)

velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

ko.javascript.info/import-export

모듈 내보내고 가져오기

www.daleseo.com/react-router-basic/

React Router로 라우팅 하기

react.vlpt.us/react-router/01-concepts.html

1. 프로젝트 준비 및 기본적인 사용법 · GitBook

react.vlpt.us/react-router/01-concepts.html

1. 프로젝트 준비 및 기본적인 사용법 · GitBook

medium.com/lamaground/react%EC%97%90-%EA%B5%AC%EA%B8%80-%EC%9B%B9-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-3d57692b9d1a

React에 구글 웹 폰트 적용하기