Frontend 세미나 4주차] React Publishing, Router

package.json 파일이 있는 곳에서 git clone 명령어를 쳐야지 말을 듣는다.

요새는 하나의 파일 안에 html, css, js를 모두 포함하는 패턴이 인기를 끌고 있다.

Styled Component

: class, id, tag name을 가져와 css를 적용시키지 않고도 js에서 css를 작성하는 방법

- 사용자는 원하는 스타일이 지정된 컴포넌트를 생성해 하나의 태그처럼 사용할 수 있다.

- 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 해서 재사용이 가능하며 전역에서 중첩 사용되지 않게 (컴포넌트 자체에서만 적용됨) 만들어준다.

- const 컴포넌트명 = styled.컴포넌트 `스타일코드`; => styled. 뒤의 컴포넌트는 반드시 react에서 제공하는 컴포넌트를 사용해야 한다.
-> 사용하기 위해선 import styled from 'styled-components'; 붙이기

flex box 복습

• display: flex; -> 가로로 각 아이템들의 width만큼 차지한다.
• flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성 (오뎅꼬치가 꽂히는 메인축의 방향)
• justify-content : 메인축 방향으로 정렬 (flex-direction을 기준으로)
• align-items : 메인축의 수직인 방향으로 정렬 (오뎅꼬치에서 뜯어 먹음)
  >> 오뎅꼬치 방향 = flex-direction = 메인축 방향

구글 메인 페이지 분석

- 구글 들어가서 f12 개발자 도구를 이용해 어떤 식으로 컴포넌트들이 이루어져 있는지 보기

- ColorZila 크롬 웹앱을 이용해 스포이드로 원하는 색상의 코드를 뽑아올 수 있다.

• color : rgba(0,0,0,0,87); -> 맨 마지막이 투명도 값
• 나머지 컴포넌트 부분을 right가 모두 차지하게 하고 싶다. => flex : 1; 하면 됌
• 중앙 정렬 -> margin : auto 0;
• margin-top: auto -> 바닥으로 쫙 붙이겠다.
• flex-direction : row는 기본값으로 세팅되어 있으므로 굳이 안 써줘도 된다.
• border 과 outline은 같이 다닌다. Ex) border: 1px solid lightgray; outline: none;
• margin: 11px 4px; -> 상하 : 11px, 좌우 : 4px
• Styled Component에도 속성(att)을 적용할 수 있다.
  >> Styled-component에 정적 속성 설정하기
  Ex) const Input = styled.input.attrs({
                              type: "text",
                              size: "1em",   // 속성 설정
                             })
                             border: 2px solid palevioletred;   // 스타일 코드
  ==> 단 type, size 같은 속성들이 input 태그 안에 존재하는 props들이어야 하고 반드시 객체 형태로 입력을 해줘야 한다.
  >> Props 값에 따라 style 변경하기
  Ex) const Link = styled.a.attrs((props) => ({
                              href: props.href,   // props를 통해 attribute 설정 가능
                             }))
                              color: #70757a;
                              text-decoration: none;
                              padding: 15px;
                              display: inline-block;
                             ;
                             <Link href="https://policies.google.come/u/1/terms?h1=ko/fg=1"> 약관 </Link>
• justify-content: space-evenly; -> 동일한 간격으로 아이템들을 떨어트려 놓는다.
• 남은 부분 꽉 채워서 공백 메워줬으면 한다 -> flex : 1 사용하기
• flex-wrap : wrap -> 화면이 줄어들어 컴포넌트들이 넘치게 될 때 다음 칸으로 넘어가겠다. => 반응형 웹

Theme Provider

- 사용하기 위해 import { ThemeProvider } from "styled-components";

- Context API를 기반으로 이루어져 있어 ThemeProvider로 감싸진 자식 컴포넌트들은 ThemeProvider로 전달받은 theme를 props로 전달받아서 사용이 가능하다.

 

사용 방법

1. theme이라는 이름을 가진 비어있는 객체를 만든다.
2. 위에서 생성한 theme 객체를 ThemeProvider의 props로 넣어준다.
   -> styled-components가 모든 컴포넌트에 이 theme 변수를 inject 해준다.
3. 이제 styled-componenet 내부에서 background-color: ${props => props.theme.bgColor} 같이 theme props를 활용할 수 있게 된다.

클론 코딩한 구글 페이지에 검색 기능 넣기

1. styled-component에도 attribute를 설정할 수 있다.
2. Enter 키 이벤트를 받으려면 input 태그의 ~ attribute를 활용하면 된다. (이벤트 객체 e를 통해 사용자가 입력한 값에 접근 가능)
3. 구글 검색창의 url 규칙 : https://www.google.co.kr/search?q={검색어}
4. 현재 보고 있는 페이지에서 다른 페이지로 이동 -> js 페이지 이동

Web 작동 방식

- 랜더링의 주체가 서버 -> 사용자의 웹 페이지 상태를 기억해 다시 유지 -> 변경되지 않은 부분까지 새롭게 수없이 불러오는 불필요한 로딩 문제 O

- React의 위력 : 랜더링의 주체는 브라우저!
=> 변화된 DOM과 원래의 DOM을 비교해 바뀐 부분만을 실제 DOM에 적용한다.
즉, 변화하지 않고 유지해야 할 부분은 가상 DOM이 기억하고 새로운 데이터가 필요할 때만 서버에게 부탁하는 구조로 서버의 역할이 굉장히 줄어들고 랜더링이 자체적으로 브라우저 안에서 가능하게 되었다.

자체 새로 고침의 필터 기준 : React Virtual Dom,

React의 자체 새로 고침, 랜더링 : View의 render() 가 담당!

SPA & Routing

- routing : 다른 주소에 따른 다른 페이지를 불러오는 것

 

애니메이션을 사용할 때 쓰는 패키지 : react-router, react-router-dom, react-transition-group

실습

ul>li*3>Link + Enter => 자동적으로 ul 안, li가 3개 만들어진다.

- Link 컴포넌트는 a 태그와 같은 역할을 하는데 페이지 전환을 방지하는 기능이 있다는 특징이 있다.
*사용하기 위해서 import { Link } from "react-router-dom"; 쓰기

 

이미지를 props로 받아서 컴포넌트를 리턴하는 페이지 컴포넌트 만들기!

• 링크와 연결할 페이지들 만들기 :
  const Transition = () => {
     const PageEwha = <Page image={Ewha} />
     const PageDior = <Page image={Dior} />
  
     const location = useLocation();   // useState와 비슷
  
  return();
  };
• 대표 태그 : <Route>
  Ex) <Route path="주소" element={보여 줄 컴포넌트} />
• 여러 Route 태그들을 묶으려면 <Routes> 태그로 감싸주기
  => 그 중에서 일치하는 단 하나의 라우터만 랜더링 해준다.
• <Route exact path="/" element={PageEwha} /> --> /만 있는 주소는 다른 것들을 부를 때 함께 불러와질 수 있기 때문에 exact를 꼭 써준다.
  Ex) <Route path="/DIOR" element={PageDior} />
• <CSSTransition> : 애니메이션을 만들 수 있는 태그

JSX란?

JavaScript를 확장한 문법으로 리액트로 js 코드 안에서 UI 관련 개발을 할 때 사용된다.

 

 

*** alt ="장소 사진" --> 시각장애인분들을 위해 붙이는 것을 습관들이도록 하자.