반업주부의 일상 배움사

글로벌 이벤트라고 생각하면 편해요. 실제는 그렇지 않겠지만 스토어는 리듀서들을 가진 오브젝트고, 실제 데이터는 리듀서에 들어있다고 생각해보세요. store.reducer.data 파일 하나로 끝낼께요. import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { createStore, combineReducers } from 'redux'; ///////////////////////////////////////// // // Main // ///////////////////////////////////////// function Main() { const dispatch = useDi..

SCSS 같은거라 보면 돼요. 설치할께요. npm install --save styled-components 상속도 되고 구조화도 가능해요. 종합 예제를 만들어봐요. import styled, { css } from 'styled-components'; const BoxParent = styled.div` padding: 50px; `; const Box = styled(BoxParent)` background-color: ${(props) => props.bgColor}; color: red; // &는 this와 같은 의미 & > div { color: blue; ${(props) => props.bgColor === 'grey' && css` color: yellow; `} } `; function..

React.createElement()를 많이 쓰면 코드 파악이 어려워요. 그래서 HTML과 유사한 방식으로 컴포넌트들을 생성할 수 있도록 JSX가 나왔어요. create-react-app으로 프로젝트를 생성해요. npx create-react-app jsxtest src/App.js를 열어보면 div, img, p, a 등 익숙한 태그들이 보이죠? 컴파일 하면 HTML로 변환되지만 현재 상태는 리액트 컴포넌트에요. class 대신 className을 쓰고 for 대신 htmlFor를 쓰는 등의 차이가 있어요. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to relo..

index.html 파일 하나로 끝내보죠. react.js와 react-dom.js만 있으면 돼요. 에 이걸 넣어요. ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요. 이번엔 클래스 컴포넌트를 만들어 봐요. 이번엔 함수 컴포넌트를 만들어 봐요. 클래스 컴포넌트의 props에 값을 넘겨봐요. 컴포넌트를 재사용할 수 있어요. 함수 컴포넌트의 props에도 값을 넘겨요. 클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요. 태그를 생성할 때 속성값을 넣을 수 있어요. 태그로 해보죠. 한 번 보여주고 끝나는 페이지는 재미없죠? 클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요. 화면을 다시 그린..