[퀴즈,점수화면 뷰만들기] 우정테스트 사이트 만들기(Feat.리액트)

이번에 만들어볼 부분은 퀴즈화면과 점수화면이다! 

여기에서 이벤트리스너를 통해 스와이프를 만들어서 퀴즈를 풀어볼 수 있도록 만들었는데 참으로 어려웠다ㅠ

그래도 다시한번 동작하는 원리, 이해하기위해 차근차근 정리하면서 공부해보자!

 

 

 

1. 필요 설치 패키지

yarn add react-tinder-card

yarn add styled-components

 

2. 화면구성

Quiz.js

Score.js

 

눈에 익숙해질 수 있도록 함수형 컴포넌트의 기본뼈대를 짚고넘어가자.

import React from "react"; const Quiz = (props) => {       return null; } export default Quiz;

Score.js도 동일하게 함수형 컴포넌트로 시작하자.

 

그리고 잊지말고 App.js에서 가져다가 사용할 수 있도록 임포트 먼저해주자!

import Quiz from "./Quiz";

import Score from "./Score";

 

본격적으로 화면을 만들기에 앞서! CSS는 styled-component를 사용할것이므로 임포트 해주자.

import styled from "styled-components";

 

2. Quiz.js 뷰 만들기

 - 기본 뼈대 만들고 스타일컴포넌트를 적용하자.  

<div>    //테두리영역   <p><span></p></span>.  // 몇번문제인지 알려주는 제목영역   <h1></h1>                           // 문제내용    <div>                       // 정답영역(뒷판)         <div>O</div>         <div>X</div>    </div>     <div>                       // 이미지 (앞판)        <img/>     </div> </div>

이미지는 동일한 방식으로 임포트해주고 src={img} 가져와 사용한다.

 

* styled-component 적용 시 주의할점

  - 기본형태(백틱사용)

     const [클래스명] = styled.div`

          ....

      `;

    → 그리고나서, 내가 적용하고자하는 div ,h1, p 등등 태그명을 대신해 클래스명을 입력해주면 끝!

        

   - SCSS 문법 (상위요소 이어쓰기)

& > p > span {

padding: 8px 16px;

background-color: #fef5d4;

// border-bottom: 3px solid #ffd6aa;

border-radius: 30px;

 

이런식으로 & 을 활용하여 상위요소를 이어써서 CSS를 적용해줄 수 도있다.

 

   - 마지막으로, 오타 주의하자!!!

      VSCode에서 기본적으로 html,css 를 작성하면은 자동완성기능을 사용할 수 있어서 비교적 오타가 날일이 적었는데, 

      스타일컴포넌트에서는 그런 기능은 없어서 직접 작성을 해야하므로 화면을 계속 확인하면서 오타는 없는지 확인을 해줘야할것같다. 

      (영어에 약한건지 영타가 약한건지ㅠ 오타때문에 오류나는경우 찾기가 쉽지않다)

 

3.Score.js 뷰 만들기

 - 마찬가지로, 기본뼈대를 만들고 styled-component를 적용해보자

<div>                //     <h1>name 퀴즈에 대한 내 점수는?</h1>    //제목      <div>         <span>100</span>점    //점수         <p>이정도면 찐친!</p>     </div>     <button>랭킹보기</button> </div>

이렇게 만들어놓고 위와동일하게 styled-component를 적용해보면 좋을 것 같다.

 

CSS는 이미 만들어진 여러페이지를 참고해서 내가 따라만들어보다보면은 

자주쓰이는 코드들은 계속 사용하기때문에 나만의 스킬이 생기지 않을까 싶다!!