본문 바로가기

내마음대로만들어보자/React58

React - 프로그래스바 적용하기 우선은 아래와같은 형태로 프로그래스바를 만들어보자! 리액트에서 스타일을 꾸밀 수 있는 방법은 너무 여러가지여서 어떤식으로 만드는지 방법에 대해 익혀보고 흐름에 대해 이해가 된다면 다른 keyframes 들을 찾아보고 만들어보자. 이제는 무언가 작업을 할떄 변경하는 순서를 보면서 어떤식으로 동작되는지 이해해보자! 1. 기본값 형태를 수정하자 ① 완료여부를 알아야하므로, 딕셔너리 형태로 변경해준다.(상태값 변경) → 모듈안에 리덕스에 들어있는 기본값 형태를 변경해준다. (bucket.js) const initialState = { // list: ["영화관 가기", "매일 책읽기", "수영 배우기"], list: [ { text: "영화관 가기", completed: false }, { text: "매일 책.. 2021. 7. 28.
keyframes - transition , animation 1. keyframes 사용하기 이미 styled-components 안에 들어있으며, 웹에서 애니메이션을 구현할 때 쓰인다.(transition , animation) - transition은 단순한 엘리먼트 상태변화에 쓰이고, - animation은 다이나믹한 효과를 주는데 쓰다. → Keyframes은 animation에서 사용하는 속성 중 하나 아래 예제를 통해서 어떻게 동작하는지 익혀보자. 1. 네모박스를 우선 만들어보자. import React from 'react'; import './App.css'; // styled와 keyframes를 불러온다. import styled, {keyframes} from "styled-components"; function App() { return ( .. 2021. 7. 27.
리덕스(redux) 써보기 1. 덕스(ducks)구조 보통은 리덕스를 사용할때는 모양대로 구분해서 코드를 작성해준다. (액션은 액션대로, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성) 덕스구조는 모양새대로 묶는것이 아닌 기능대로 묶어주는것을 말한다. 리덕스 기본형태를 아래 깃허브를 참고하자. https://github.com/erikras/ducks-modular-redux GitHub - erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux A proposal for bundling reducers, action types and actions when using Redux - Git.. 2021. 7. 26.
리덕스란? - 리덕스를 통한 상태관리 우선, 리덕스에 대해서 알아보기 위해 패키지 부터 설치하자. (리덕스는 상태 관리 라이브러리이며, 전역상태 관리를 할 수 있도록 도와준다.) 리덕스 패키지 설치 yarn add redux react-redux * 리덕스 공식문서 https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 1. 리덕스 개념과 용어 리덕스는 데이터를 한군데 몰아넣고, 여기저기에서 꺼내서 사용할 수 있도록 해주는 친구다. - State 리덕스에서 저장하고 있는 상태값(=데이터)이며, 딕셔너리 형태로 보관된다. → ({[key]: value}); - Action 상태에 변.. 2021. 7. 26.

티스토리툴바