패스트캠퍼스 챌린지 28 일차 - 리액트로 만드는 퀴즈 사이트02

0. 공부 인증 

공부 시작 23: 21

공부 종료 23 : 45

악 누가 컴퓨터 구조 같은 과목을 들으라고 했을까...

너무 빡세다, 여전히 알고 있는 것이 없다.

 

 

1. 버튼 컴포넌트 만들기

-> 리액트 생성하고, 필요없는 파일 전부 삭제하기(테스트 파일 등)

-> 리액트 디벨로퍼 툴을 활용하자! - 구글 크롬 확장 프로그램 (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

 -> 컴포넌트를 확인할 수 있음.

 

components > PinkButton.js 파일을 생성

import React from 'react'
import styled from 'styled-components'


const MyButton = styled.a`

`;



export function PinkButton({text, onClick}) {
    return (
        <MyButton>
            
        </MyButton>
    )
}

 

* 컴포넌트 생성시에는 그냥 함술 export function 하는 경우가 많음.

왜냐하면, 컴포넌트 파일 내에서 다른 함수를 출력할 수도 있기 때문에.

 

그리고 App.js

import React from "react";
import {useSelector, useDispatch} from 'react-redux'
import {PinkButton} from './components/PinkButton'
import {next} from './store/module/score'

function App() {
  const page = useSelector(state => state.score.page)
  const dispatch = useDispatch();

  return (
    <>{
      page === 0 && (
        <main>
          <img />
          <h1>나라별 수도 퀴즈</h1>
          <h2>어려울 걸?</h2>
          <PinkButton text ={"테스트 시작"} onClick={() => {
            dispatch(next())
          }} />
        </main>
      ) 
    }</>
  );
}

export default App;

 

리덕스를 사용하기 위해서는 

useSelector, useDispatch 그리고 store 폴더의 액션 생성함수가 필요함.

useSelector는 state값을 가지고 오는 것이고,

useDispatch는 액션 생성함수를 실행하기 위한 것이고,

액션함수는 실제로 값을 변경하는 녀석임.

 

CSS 에서 

user-select 를 none 으로 하면 드래그가 불가 -> 선택 불가

transition : transform .15s ease-out, background .15s ease-out; -> 이름 속도 트랜지션 이름 작성해주면 됨.

 

가상 CSS는 다음 강의에서 살펴볼 예정

 

 

 

 

환급 챌린지 (28/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지