캐나다 개발자

툴킷에 대해 공식문서 예제로 설명을 하려한다. https://redux-toolkit.js.org/tutorials/quick-start 1. store를 생성해준다 import { configureStore } from '@reduxjs/toolkit' // 빈 스토어 생성, // configureStore - reducer에서 반환된 새로운 state를 store라는 객체로 정리 export const store = configureStore({ reducer: {}, }) 2. store를 index.js에 연결해준다 - 전역관리 세팅 import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App f..

Redux 란 store : 변수들을 저장하고 있는 저장소입니다 -> 단 1개만 생성가능 view : 우리가 보는 화면을 말합니다. action : store에 있는 값을 바꾸고 싶을 때 action을 활용합니다. -> store안의 데이터는 오로지 action으로만 변경가능하다. -> action을 dispatch한다 라고 표현한다. reducer : 이전의 상태와 바꾸고자 하는 action을 합쳐 새로운 값을 생성합니다 -> 값을 실질적으로 수정하는곳, CRUD 가능. 쉽게말하자면 store라는 창고가 있다. 거기서 데이터들을 보관할거고 만약 데이터를 수정할일이 있으면 수정해 달라는걸 관리인한테 알려줘서 수정을 진행해야한다. - 수정해달라고 알려주는거( action을 dispatch), 관리인이수정 ..

깃헙 IO에 올릴때는 BrowserRouter 대신 HashRouter를 써야한다. 주소창에 #이 생겨서 보기는 싫어지지만, #을 기준으로 좌측의 주소를 무시해준다. 이것도 된다는데 내가햇을땐 실패했다. PUBLIC_URL은 홈페이지를 가르킨다고 했었다. // 터미널에 입력 npm i gh-pages package.json에 추가해야함 homepage:"https://kevinkim910408.github.io/리파지토리이름" // 리파지토리 체크 git remote -v // package.json에 추가해야함 - Scripts에 추가할것 "deploy": "gh-pages -d build", "predeploy": "npm run build" // 빌드 생성 npm run deploy

https://kyung-a.tistory.com/36 자세한 변화는 위의 글 참조 1. Routes 모든 Route 들은 Routes 안에 들어가야한다. exact 기능도 없어졌다. - 알아서 url은 정확히 매칭된다. 2. useHistory() 같은건 없다 이제 대신 useNavigate()를 쓰면 된다. import {useNavigate } from 'react-router-dom'; const navigate = useNavigate (); {navigate('/detail')}}> useNavigate() vs Link Link는 JSX로 쓸수 있고, useNavigate()는 없다. 3. 잘못된 url 처리 app.js, bucketlist.jsx 더보기 app.js import React..

뭔가 Layout만 하기에는 심심할거 같아서 useRef()를 통해서 input 값을 동적으로 name에 줘봤다. 다만 input창을 초기화 시키는 방법을 실패했다. 막장의 소스코드는 아래있다 app.js and start.jsx 더보기 // app. js import React, {useState, useRef} from "react"; import styled from "styled-components"; // styled component // components import Start from './Start.jsx' import img from "./scc_img01.png"; function App() { const [name, setName] = useState('르탄이'); // name에..

1. ThemeProvider 사용할려면 import 먼저해야하고 import { ThemeProvider } from 'styled-components' 아래처럼 적용하고싶은 범위에 theme을 적용가능하다. const theme = { dark: { primary: '#000', text: '#fff', }, light: { primary: '#fff', text: '#000', } function App() { return ( HELLO HELLO HELLO GO TO GOOGLE SUBMIT LIGHT ); } 다크모드를 만드는걸 예로들면 코드는 아래와 같이 props에 접근해서 theme객체안의 light객체안의 값에 접근가능 (위에서 2중객체로 만들었다.) export const LightBu..

장점 페이지에서 렌더링되는 요소에 맞춰 자동으로 해당 스타일만 삽입합니다. 그때그때 필요한 스타일만 로드한다는 거죠! 스타일에 대한 고유 클래스명을 생성합니다. 중복이나 오타 걱정 노놉 더이상 사용되지 않는 CSS를 쉽게 삭제할 수 있습니다. 모든 스타일은 특정 요소와 연결되어 있기 때문에 해당 요소가 삭제되면 스타일도 삭제돼요. 동적 스타일링이 편해집니다. 이 props가 있다면 A, 없다면 B와 같이 직관적으로 개별 스타일링이 가능해요. 출처: https://nykim.work/107 npm install styled-components TIP. styled-components 내에서 emmet을 쓰고 싶다면 vscode-styled-components 을 설치 1. Styled Components ..

HTML에서 변화는 감지하지만, 그 변화가 렌더링을 발생시키지 않을때 사용 1. 변수저장으로 사용된다 const ref = useRef(value) 이런식으로 선언하면 인자로 넣어준 value는 {current: value}로 저장이 된다. 그래서 이 객체의 값은 ref.current= value로 언제든 수정가능 state는 html에서 자꾸 변경되는 값에 쓰기 좋은데 ref는 렌더링이 안되기 때문에 변수들의 값을 유지할때 많이 쓴다. **state에서 렌더링을 다시해도 ref의 값은 유지가 된다. 만약 내가 보여주지는않지만 상태가 바뀔때마다 상태를 저장하고싶은게 있는데, 그걸 일반변수로 해버리면, 일반변수는 처음 초기값으로 돌아간다. 하지만 ref의 값은 안돌아간다. import { useRef, u..

아직 경험이 적어서 쓰는곳에 대해 잘은 모르지만, open source API 가져올떄 (fetch()나 등등으로) 딱 한번만 가져오면 되니까 그럴때 사용. 1. componentDidMount mount될때만 실행되는 코드, 두번째 인자에 빈 배열을 넣는다. useEffect(() => {}, []) import { useEffect, useState } from 'react'; const App = () => { const [count, setCount] = useState(0); const increment = () => setCount(count+1); const decrement = () => setCount(count-1); const notRun = ''; // count가 호출될때마다 실행..

useState()는 react library에서 정의된 자바스크립트 함수이다. useState를 호출하면 배열을 반환한다. 첫 번째 원소가 현재 상태를 설정하고, 두 번째 원소는 상태를 갱신해 주는 함수이다. const [현재상태, 상태의갱신을도와줌] = useState(현재상태에게 줄 초기값) 그냥 html화면에서 자주 갱신되거나 변경될거같은건 state로 빼주면 편하다. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; const App = () => { // count같이 html에서 자주 변할만한거는 state로 빼준다 const [count, setCount] = useState(0); // ..