Web tutorial with React-1

hongcoder·2일 전
0

Front-end

목록 보기
10/12

저번에 했던 리액트를 이용한 날씨 튜토리얼은

하나의 컴포넌트만 사용해서 했던 프로젝트라 아무래도 리액트의 진가를

제대로 보여주지 못했는데 이번 웹 튜토리얼 리액트는 좀 더 본질적인

리액트 사용을 통해서 리액트로 컴포넌트를 관리하는 것의 장점을

조금 더 자세히 볼 수 있다. 또한 tailwind를 사용해서 css를 보다 편리하게

사용하는 방법도 살펴보자.

(참고: https://www.youtube.com/watch?v=mACw_G-okPE&t=8s&ab_channel=QuentinWattTutorials)

이번 프로젝트를 통해서 알 수 있는 점.

  1. 함수형 리액트 컴포넌트의 사용
  2. 리액트 동적 라우팅 사용(Router, Link, Route, Switch)
  3. 리액트 Hooks 사용(useState, useEffect)
  4. 테일윈드 스타일 사용

npx install create-react-app

src폴더안에 새로 component, hooks, views 폴더를 만들어주자.

index에 들어갈 App.js의 구성은

클래스네임은 우선 건너뛰고 우리가 나타낼 페이지의 구성을 살펴보면

Router와 Switch Route를 이용하기위해 아래의 패키지를 설치해주자.

npm install react-router-dom

import를 통해 값을 불러줍니다.

라우팅을 하는 이유는

리액트는 SPA(single page application)인 페이지가 하나로 구성된

어플리케이션이기때문에 각 주소에 맞는 뷰를 보여주기위해 라우팅 기능을

사용해서 우리가 직접 브라우저 api를 사용하고 상태를 설정해서 다른 뷰를

보여줘야합니다.

여러 화면으로 구성된 웹 어플리케이션을 만들고자하면,

react-router는 필수 라이브러리입니다!

BrowserRouter : html5의 history api를 활용해서 ui를 업데이트를 한다.
link: html의 a태그처럼 to속성을 이용해서 원하는 링크로 이동한다.
Route: path를 이용해서 원하는 url을 설정하고 해당 컴포넌트를 렌더링할 수 있다.
Switch: path가 충돌하지않게 여러 Route 컴포넌트를 Switch내부에 넣어서 제일 처음 매칭되는 Route만 선별하여 실행시킨다 충돌되는 오류를 방지하고 Route이동시에 발생할 수 있는 오류도 막아준다.

라우트를 설정할 땐, Route컴포넌트를 사용하고, 경로를 path값으로 설정합니다.

Home컴포넌트의 path="/" 값의 경우, 홈을 그대로 나타내고

About과 Product는 원하는 이동경로를 설정해줍니다.

exact값을 주지않으면 about product에도 /가 있기때문에

화면에 중복으로 나오게 됩니다.

Route에 exact값을 줘서 이하 경로를 중복 출력하지 않도록 해준다.

웹의 이미지는 새로고침을 할 때마다 랜덤으로 보여진다.

App.js를 지나서 이 웹의 핵심 컴포넌트들을 하나씩 살펴보자.

Header > Navigation > NavigationMenu

Header부분을 통해서 nav영역을 만들어보면

Jsx로 웹의 title을 React Web으로 정해주고

Header.js내에서

import React from 'react'
import Navigation from './Navigation'

Navigation.js에서는

import React, { useState } from 'react';
import NavigationMenu from './NavigationMenu';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faBars} from '@fortawesome/free-solid-svg-icons';
import {useTransition, animated} from 'react-spring'

위의 것들을 받아온다.

nav에서 hamburger(작대기 세로로 ---) fold-out을 사용하기 위해서

css로 만들지않고 fontawesome을 통해서 bar를 가져오자.

https://fontawesome.com/how-to-use/on-the-web/using-with/react

폰트어썸 홈페이지를 참고하면 react에 맞는 대응을 찾을 수 있는데

먼저 npm을 이용해서 패키지들을 받아주고

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faBars} from '@fortawesome/free-solid-svg-icons';

폰트어썸과 우리가 쓸 Bars에 대한 아이콘값을 가져온다.

네이게이션 메뉴를 이번 웹에서는 Fold-out방식으로 bars아이콘을 누르면

왼쪽에서 펼쳐졌다 접혔다하는 식으로 구현을 해보자.

여기서 nav bar를 자연스럽게, 부드럽게 구현을 하고자

react-spring을 이용할 예정이다.

react-spring이란 UI관련 애니메이션을 스프링 물리학 기반으로 구현하는

애니메이션 라이브러리이다.

https://www.react-spring.io/

홈페이지를 가보면 좋은 다양한 활용예시를 볼 수 있다.

react-spring Hooks중 useTransition으로 사용해보자.

npm install react-spring

react-spring을 인스톨해주고


import {useTransition, animated} from 'react-spring'

홈페이지에서 useTransition의 예시 중, 아이콘이 사라졌다 나타났다하는

코드가 있는데

위 코드는 useTransition으로 opacity(불투명도)값을 조절하는 코드이다.

우선 useState로 메뉴가 처음에는 보이지않도록 디폴트를 주고

react-spring을 이용해서 maskTransitions을 변수로

인자로 showMenu(false)와 null(initial값을 처음에 주지않음)

그리고 마지막으로 우리가 원하는 방식의 불투명도를 지정해줄 수 있다.

두 번째 변수로도 menuTransitions에서 transform: translateX값을

-100%에서 시작해서 0% -100%로 설정해서 화면 왼쪽을 기준으로

왼쪽으로 사라졌다가 생겼다 할 수 있다.

이제 function Navigation()의 리턴값을 보면,

burger bar에 onClick값으로 메뉴창이 false에서 true가 되게 해주고

icon={faBars}로 bar icon을 가져온다.

그리고 maskTransitions와 menuTransitions에

react-spring의 메뉴얼대로

maskTransitions, menuTransitions에

maskTransitions.map(({item, key, props})=> 
item && <animated.div
	    key={key}
	    style={props}
    	    className={*tailwind css}
            onClick={()=>setShowMenu(false)}
            >
            </animated.div>
            
            
menuTransitions.map(({item, key, props})=> 
item && <animated.div
	    key={key}	
            style={props}
            className={*tailwind css}
        >
	<NavigationMenu closeMenu={()=> setShowmenu(false)}
    	/>
        </animated.div>

위의 코드처럼 react-springd을 토대로 값을 준다.

이제 NavigationMenu를 가서

function NavigationMenu(props)를 살펴보면

Link를 통해서 각 컴포넌트로 이동할 수 있는 값을 주고 onClick에서

Navigation.js에서 설정한 closeMenu{()=> setShowMenu(false)}

props.closeMenu값을 줘서 클릭 시 메뉴창이 닫히도록 해준다.

이렇게 header > navigation > navigationmenu까지 끝이 났다.

기록하고 하는 내용이 길다보니 나머지는 2부로 넘어가서 작성해보자!

profile
기록하지 않으면 기억되지않음🧐

0개의 댓글