리액트 기초 강의 4주차 정리 -1

keyframes

 

-keyframes는 styled-components안에 이미 들어있음

-웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다.

 

-transition은 단순한 엘리먼트 상태변화에 쓰기 좋고,

animation은 다이나믹한 효과를 주는데 쓰기 좋음!

 

Keyframes은 animation에서 사용하는 속성 중 하나!

 

* keyframes 써보기 *

 

1. 새 프로젝트에 styled-components 설치

2. 코드

import React from 'react';
import styled, { keyframes } from "styled-components";

const Animation =(props)=>{

    return (
        <Box>
        </Box>

    );

}

const move=keyframes`
0%{
    top: 20px;
    opacity:1;
    left:20px;
    background-color:green;
}

30%{
    top:50px;
    background-color:orange;
}

50%{
    top: 200px;
    opacity:0;
    left:200px;
}

80%{
   top:150px; 
}

100%{
    top:20px; 
    opacity:1;  
    left:20px;
    background-color:green;

}
`;
//백틱 안에서 자바스크립트 이용 방법: ${}
//infinite: 무한히 반복한다
const Box=styled.div`
width:300px;
height:300px;
background-color:green;
border-radius:150px;
position:absolute;
top:20px;
left:20px;
opacity:1;
animation:${move} 2s 1s infinite;
`;

export default Animation;

 

버킷리스트에 프로그래스바 달기

-상태값 형태부터 바꾸기

 

기본 값을 딕셔너리로 만들어서, 버킷리스트 텍스트하고 완료 여부를 넣어보겠음.

list: [{text: '버킷리스트', completed: true}, ...] 형태가 됨!

 

bucket.js 모듈에서 

그럼 BucketList.js가서 {list} -> {list.text}로 바꿔주고

Detail.js 페이지에서도 .text추가. 이런식으로 영향받는 부분들을 하나하나씩 수정해주기

bucket.js 다시 가서

잘 뜨는 것 볼 수 있음.

 

이제 완료하기 버튼 추가할 것임. 왜?

완료하기 기능이 있어야 프로그래스바를 볼 수 있을 거니까!

 

어떤 순서로?

뷰 먼저! 버튼 먼저 만들고 액션 -> 액션 생성함수 -> 리듀서 만들고

버튼 누르면 액션 호출하도록 바꿔주기.

 

1. Detail.js에서 버튼 만들어주기

 

2. bucket.js에서 액션 만들어주기

3. 액션 크리에이터 만들어주기

4. 리듀서 만들어주기

5. 연결해주기

Detail.js에 가서 dispatch 해오기 위해선 액션이 필요.

그러니까 액션 생성 함수 먼저 불러오기!

6. 그 다음 버튼에다가 onClick 하고 여기에서 dispatch해주기.

7. 버킷리스트 바 완료되면 색깔 바꿔주고 싶다. = completed가 true가 되면 색 바꾸기!

styled-components에서 props 사용해서 바꿔주기.

백틱 안에다가 ${ }

여기에서 이 버킷리스트가 나의 이 한 항목 항목이 완료가 됐나 완료가 되지 않았나

completed 받아다가 props로 넘겨줄 것임

그래서 색깔 다르게 뜨게 하기

8. 색깔 바뀌는 것 까지 잘 되었으니 Progress바 만들어보기

1) Progress.js 만들기

2) App.js에 임포트 해주고 자리 잡아주기

3) 그 다음에 프로그래스 바를 띄울 위치에서 뭐를 알아야함? 완성도를 알아야 함!

어떤게 완료가 됐고 어떤게 완료가 안됐다. 그 말은 뭐야? 리덕스 데이터 가지고 와야 한다!

그 말은 스토어랑 연결해줘야함.

Progress.js와서 styled-componetns 불러오고 일단 뷰부터 그려.

모양을 보면 회색 div와 안에 있는 오렌지 색 두개의 div가 필요

그럼 바깥에 있는 친구 이름을 ProgressBar 라고 하고 안에 있는 친구 이름은 HighLightBar!

 

스크롤바 움직이기

 

언제써? 너무 긴 글 있을 때 한번에 올라가기 등등

 

window.scrollTo() → 이 녀석 어디선가 본 적 없으신가요? 🙂

 

뭐부터해? 뷰 부터!

 

1. 위로가기 하려면 위로가기 버튼부터 만들어야함. 

2. 함수 추가

scrollTo 라는 친구 안에는 뭐가 들어가냐면 파라미터로 x, y 좌표가 들어감.

x 좌표는 좌, 우 y 좌표는 위, 아래

우리는 위로 갈거니까 y좌표에 0을 넣어준다.

더 스무스하게 움직이고 싶다면? 파라미터 하나 더 추가!

 

버킷리스트를 좀 더 예쁘게!

 

꼭 해보기!(키워드를 가지고 검색해서 아래 항목은 꼭꼭 스스로 찾아 해봅시다!) :

1) 버킷리스트 아이템을 추가하면, 리스트 항목이 있는 div에만 스크롤 생기게 하기

- 키워드: overflow, max-height 혹은, div 넘치지 않게 하기

2) 프로그래스 바에 동그라미 달아보기

- 키워드: flex, align-items, div 겹치려면?

3) input focus일 때 border 색상 바꿔보기

- 키워드: input text focus border 색상 바꾸기

 

1)

2)

3)

App.js

const SmallContainer = styled.div`
  max-width: 350px;
  min-height: 10vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;

  display: flex;
  align-items:center;
  justify-content: space-between;
  
  //* 하면 하위에 있는 모든 아이템
  //인풋박스 패딩
  & * {
    padding:5px;
  }
  //div 안에있는 것 상속하는 방법: &
  //중괄호 묶어주는 것을 nesting 한다고 함.

  & input {
    width:70%;
    &:focus{
      border: 1px solid #673ab7;
    }
  }

  & button {
    width:25%;
    color:#fff;
    border: 1px solid #874cef;
    background-color:#874cef;
  }
`;