개발자 최솔이

기존 구린 방법 1. 하위 컴포넌트 변경하기 (A의 버튼을 눌러서 B, C, D를 거쳐 E에 있는 값을 변경) 2. 상위 컴포넌트 변경하기 (E의 버튼을 눌러 역으로 D,C,B 를 거쳐 A에 있는 값을 변경) 각 함수들에 props를 인자로 받아서, B,C,D,E로 넘겨주어야 했다. 이문제를 해결하기 위해 useContext를 사용하기로 했다. 1. 하위 컴포넌트 전체에 데이터를 공유하는 방법 데이터를 set 하는 놈 = 가장 상위 컴포넌트 => provider 데이터를 get 하는 놈 = 모든 하위 컴포넌트에서 접근 가능 1) consumer import PersonContext from "../contexts/PersonContext"; export default function Example1() ..

Basic Hooks useState: state를 대체 할 수 있다. useEffect: 라이프 사이클 훅을 대체 할 수 있다 Additional Hooks useReducer : state를 변경하는 로직이 담겨있는 함수 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들때 다음 state가 이전state에 의존적일때 Redux를 안다면 쉽게 이용 가능 useMemo useCallback createRef: (Uncontrolled-createRef) : 항상 레퍼런스를 생성해서 렌더될때 넣어준다 useRef: (Uncontrolled-useRef) : 렌더사이에도 유지해준다. 최초 렌더시 undefiend -> 이후 태그 출력 React-Router-Hooks useHistory 이전: props를 ..

// 프로젝트 생성 $ npx create-react-app style-loaders-example // install $ npm i sass $ npm i classnames $ npm i styled-components 스타일로더 CSS 모듈, SASS 모듈 Styled Component 1,2 react shadow ant design

먼저 프로젝트 내에 Pages라는 폴더를 생성하고, Home , About , Profile, NotFound 등 jsx파일을 추가한다. // Home.jsx export default function Home() { return Home 페이지입니다.; } App.js 파일에서 react-router-dom 에서 browserRouter, Redirect, Route, Switch, Link 를 import 한다. 또한 이동시킬 페이지들을 모두 import한다. import { BrowserRouter, Redirect, Route, Switch, Link } from "react-router-dom"; // App.js 의 App return 내부 (isLogin ? : )} /> 코드를 확인해보면 ..

ESlint : 내부적으로 스타일을 규정하는 것 $ npm i eslint -D // 다운로드 $ npx eslint --init //설정파일 생성 $ npx eslint index.js // index.js파일의 코딩 스타일 검사 Prettier : 예쁜 코드 만들어주는 코드 포매터 $ npm i perttier -D//설치 $ npx prettier index.js//index.js 코드 예쁘게 /// -> console.log('hello')-> console.log("hello"); // 따옴표는 ' ' 만 사용하고 세미콜론은 false로 설정했다. $ npx prettier index.js --write // js파일이 바뀜 /// default format => prettier// settin..

$ npm init -y CRA 사용해서 $ npx create-react-app [프로젝트이름] 개발모드 실행 $ npm start 프로덕션 모드 실행 $ npm run build $ npx sesrve -s build 테스트 모드 $ npm test eject : CRA 를 제거하는것, 되돌릴수 없음. CRA만으로 해결이 안될 때 제거 $ npm eject