styled-compoenents 없이 스타일을 선언하는방법 1. style.css파일을 만들고 글로벌로 선언한다. // index.js import "./style.css" 2. 인라인 스타일 사용 // app.js function App() { return 안녕하세요. } 3. css 모듈사용하기 // Movie.module.css .movie { background-color: red; } // app.js import styles from './Movie.module.css' //파일명 module.css function App() { return 안녕하세요. } css 모듈을 사용하면 클래스명을 해시로 만들어줘서 충돌날일이 없다. 설치 npm i styled-components 기본문법 impo..

styled-components, emotion 비교 프로젝트를 구축하기 전 CSS-in-JS로 유명한 두개 라이브러리 styled-components와 emotion을 비교하고 우리 환경에 맞는 라이브러리를 택하기 위해서 비교를 하게 되었다. styled-components와 emotion 문법만 조금 다를 뿐 동일한 기능을 가지고 있어서 더 선택하기 힘들었던 것 같다. 트렌드 트렌드를 확인해 보면 비슷하게 사용되고 있는것을 볼 수 있다. @emotion/core 10버전 -> @emotion/react 11버전 npm trends 크기 styled-components가 emotion에 비해 크기가 크지만 유의미한 차이는 아닌 것같다. styled-components@5.3.6 https://bundl..

redux의 단점! 많은 코드양 Redux 팀에서 단점을 보완하려고 만들어진 패키지 redux toolkit Thunk, saga, immer 안써도 된다. 내장되어있다. 리덕스의 총집합 createSlice ,createAsyncThunk 두가지가 많이 사용된다. npm install @reduxjs/toolkit createAction 액션 creator함수는 간단하게 사용할 수있도록 해준다. // 변경전 const ADD = 'add'; const DEL = 'delete'; // action creator const AddTodo = (text) => { return { type: ADD, text } } const DelTodo = (id) => { return { type: DEL, id } ..

redux redux는 data 관리를 도와주는 역할을 하기위해 만들어졌다. store data를 저장하는 곳 첫번째 argument는 리듀서가 들어가고, 두번째(옵셔널)는 initialState가 들어간다 import { createStore } from 'redux' let store = createStore(reducer); store.getState(); 현재의 state를 전달해준다. store.subscribe(함수) store에 변화가 일어날 때(state값이 변경될 때) 자동으로 실행된다. store.dispatch reducer함수를 실행하기 위한 함수, 상태변경을 일으키기 위한 유일한 방법 Action 타입과 payload를 받는다. countStore.dispatch({ type: "..