[React 숙련] 리액트 Ducks 패턴

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 가 모두 존재하도록 해야함

• format_list_bulleted React
• · 2023. 11. 8.
• textsms

[React 숙련] 전역 스타일링 | Sass | css reset

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..

• format_list_bulleted React
• · 2023. 11. 7.
• textsms

[React 숙련] Css-in-JS (styled-components) 조건부 스타일링 가능

1.Css-in-JS ▶ 자바스크립트로 css코드를 작성하는 방식 2.Styled Components * 패키지 : 리액트는 없지만, 추가로 외부에서 가져와서 사용하는 외부 라이브러리 (3rd party => npm에 모여있음) (1) VS 코드에서 plug-in 설치필요 ( vscode-styled-components ) (2) 터미널에서 (yarn create react-app CRA 실행 후 (3) 터미널에서 yarn add styled-components 실행 (마켓에서 해당 패키지 가져옴)(4) 파일 package.json에서 확인 가능 import './App.css'; import styled from 'styled-components'; function App() { const StBox ..

• format_list_bulleted React
• · 2023. 11. 7.
• textsms

[React 입문] useState | 리액트 불변성 | 랜더링

1. useState const [state, SetState] = useState('initialState'); ▶ state는 ui 바꾸기 위해서 & 랜더링을 다시 하기 위함 ▶ 구조분해할당으로 받아서 사용 = return 배열 [ 초기값 갖고 있는 변수, 상태를 변경하는 메서드 Set ] ▶ 특정 기능을 수행하는 것들 = hook (useState, useEffect, useContext, useMemo 등) 2. 리액트 라이프 사이클 : 컴포넌트 생명주기 ▶ mounting - updating - unmounting ▶ (화면보임) - (화면갱신) - (화면에서 죽음) ▶ 컴포넌트가 화면갱신을 하기 위해 "랜더링"(state가 변경)되야함. 3. 불변성 ▶ 메모리에 있는 값을 변경할 수 없는 것...

• format_list_bulleted React
• · 2023. 11. 6.
• textsms

[React 입문] 컴포넌트 안에 <input>태그 함수 호출 안 되는 오류

// 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)} => 이렇게 작..

• format_list_bulleted React
• · 2023. 11. 2.
• textsms

[React 입문] Styling + 반복되는 구간 컴포넌트 처리

// 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..

• format_list_bulleted React
• · 2023. 11. 2.
• textsms