1. Ducks 패턴 개발자들이 협업할 때 각각 구현하여 찾기 어려워서 패턴화하여 Erik Rasmussen이 제안한 Ducks 패턴으로 모듈을 작성하는 것 1) Reducer 함수를 export default 하기 --> App.js에서 import해서 사용할 수 있도록 2) Action creator 함수를 export 하기 3) Action type은 app/reducer/ACTION_TYPE 형태로 작성하기 => 모듈 파일 1개에 Action type / Action creator / Reducer 가 모두 존재하도록 해야함
1.전역 스타일링 (GlobalStyles) ▶ styled-components : 해당 컴포넌트 내에서만 가능! ▶ 프로젝트 전체를 아우르는 스타일 => createGlobalStyle 사용 [위치] GlobalStye.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; } `; export default GlobalStyle; [위치] App.jsx ▶ 적용하고 싶은 곳 위에 사용하고 하나로 큰 태그로 묶어주기 import GlobalStyle from..
1. useState const [state, SetState] = useState('initialState'); ▶ state는 ui 바꾸기 위해서 & 랜더링을 다시 하기 위함 ▶ 구조분해할당으로 받아서 사용 = return 배열 [ 초기값 갖고 있는 변수, 상태를 변경하는 메서드 Set ] ▶ 특정 기능을 수행하는 것들 = hook (useState, useEffect, useContext, useMemo 등) 2. 리액트 라이프 사이클 : 컴포넌트 생명주기 ▶ mounting - updating - unmounting ▶ (화면보임) - (화면갱신) - (화면에서 죽음) ▶ 컴포넌트가 화면갱신을 하기 위해 "랜더링"(state가 변경)되야함. 3. 불변성 ▶ 메모리에 있는 값을 변경할 수 없는 것...
// rfce import React, { useState } from 'react'; import './App.css'; function App() { const [name, setName] = useState(''); const [age, setAge] = useState(''); const nameChangeHandler = (event) => { setName(event.target.value); }; return ( nameChangeHandler(event)} /> ); } export default App; ★ 중요 포인트 ★ 태그에서 onChange를 {} event를 매개변수로 받는 함수를 넣는 경우, * onChange = {nameChangeHandler(event)} => 이렇게 작..
// rfce import React, { useState } from 'react'; import Layout from 'Layout'; const divStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '10px', border: '1px solid green', width: '100px', height: '100px', }; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; * Style을 객체로 넣고 자바스크립트로 표현하는 거라 {{}} 이렇게 표현함. * html의 class를 사용할때는 JSX에서는 className..