본문 바로가기

전체 글

 (152)
[REACT]깃허브 브랜치 명령어 (암기) -상태 관리 1. 완성된 코드를 main에 올리고 git add . git commit -m "feat:어쩌고"2. context 브랜치 생성 및 GitHub에 푸시한다git checkout -b contextgit push -u origin context3. props-drilling 브랜치 생성 후 코드 수정 및 푸시git checkout main git checkout -b props-drilling4. props-drilling 브랜치에서 코드 수정이제 props-drilling 브랜치에서만 코드 수정 작업을 합니다. 이때 Context API를 제거하고 props 방식으로 코드를 수정해야 한다. 수정이 완료되면5. props-drilling 브랜치 커밋 및 푸시git add . git commit -m " ..
[REACT]스탠다드 복습5회차_메모 Context API 로 전역상태 관리하기 Context Provider의 모든 children 컴포넌트들에게 context value를 공유한다.                ? 여기서 말하는 구독이란?todos, setTodos의 변화가 생기면 uesContext을 쓴 TodoForn을 리렌더링 하겠다는 뜻이다.그래서 새롭게 할당된 주소를 value에 할당된다. 따라서 엄밀히 만하면 context value를 구독한다.    ? 언제 props를 사용해야 할까? 1. TodoItem안에 useCountext, useState쓰지말아야 한다.export default function TodoList({ isDone }) { const { todos, setTodos } = useContext(TodoC..
[REACT]스탠다드 복습4회차_메모 (중요⭐, 매일보기) 화살표함수중괄호가 있으면 return넣어라.가급적이면 바로 return할 수 있으면 중괄호 넣지마라.if문이나 표현식이 아닌 걸 써야한다면 중괄호를 열어줘라. ? 컴포넌트가 아니라 객체를 return하고 싶을때,const foo =()=>{a:10}foo()// undefined* void함수: return키워드가 없는 함수const foo =()=>({a:10})foo()// {a: 10}소괄호로 묶으면 객체.이벤트핸들러 주의사항 { setCount((count) => count - el); }} >이벤트 핸들러의 매개변수, count-매개변수 xxxx event는 이벤트객체, 매개변수로 전달되므로 evetn를 통해 클릭 이벤트에 대한 다양한 정보나 연산을 처리할 ..
[REACT] Router-세팅 라우터를 위한 폴더를 위 처럼 만들어주고  improt, export해주면된다. import Home from "./pages/Home";import Diary from "./pages/Diary";import New from "./pages/New";import { Routes, Route } from "react-router-dom";import Notfound from "./pages/Notfound";const App = () => { //1. '/':모든일기 렌더링 home페이지 //2. '/new' : 새로운 일기를 작성하는 New페이지 //3. '/diary' : 일기를 상세히 조회하는 Diary 페이지 return ( //Routes안애는 Route만 가능. H..
[REACT] redux (프롭스 대체 및 보완 역할, 중앙관리소) 3 갑자기 든 의문여태 jsx로 하다가 왜 js를 하는지 궁금했다.리듀서와 액션을 다루는 부분에서는 JSX보다는 순수 JavaScript로 작성되는 코드이기 때문이라는데 자세히 알아보자.  JSX는 React 컴포넌트 내에서 UI를 작성할 때 사용하는 HTML-like 문법이에요. 주로 컴포넌트의 구조나 이벤트 핸들링을 정의할 때 사용된다.반면, JavaScript는 리덕스에서 상태를 관리하거나, 액션을 디스패치하거나, 리듀서를 정의할 때 사용하는 언어다. 왜 리듀서와 액션은 JavaScript로 작성하는가?리덕스의 리듀서와 액션은 상태 변경과 관련된 로직을 다루기 때문에, 이를 구현하는 것은 JavaScript로 해야 한다. 리덕스는 UI와는 직접적인 관련이 없고, 상태를 어떻게 처리할지 정의하는 코드이기..
[REACT] redux (프롭스 대체 및 보완 역할, 중앙관리소) 2 [이해 안되면 외워버려~]리듀서:상태를 어떻게 바꿀지 정의하는 함수. 리덕스에서 상태가 변하려면 반드시 리듀서가 존재해야 한다.import { useDispatch, useSelector } from "react-redux";const App = () => { const dispatch = useDispatch(); return ( { dispatch({ type: "PLUS_ONE", }); }} > +! );};export default App;//modules/counter.jsconst initialState = { number: 0,};const counter = (s..
[REACT] redux (프롭스 대체 및 보완 역할, 중앙관리소) redux 설치. npm add redux react-redux *config는 리덕스 설정 관련된 파일를 모아둔다.* modules에는 앞으로 만들 state들의 그룹을 묶어놓기 위함이다.다음으로 src 안에 redux 폴더를 만들고 그 안에 config폴더와 modules폴더를 각각 만든다.이어서 config 폴더 안에 configStore.js를 만든다.* configStore.js 리덕스 중앙관리소 즉, 스토어를 만드는 설정코드를 넣기 위함이다.    //configStore.jsimport { combineReducers, createStore } from "redux"; // 리덕스에서 제공하는 함수들 (combineReducers, createStore)을 import// 1. rootRed..
[REACT] 타임어택(스탠다스) 그동안 만든 과제 (메달집계웹)을 바탕으로 아무런 도움도 받지 않고 오로지 내 머리에서만 끄집어내어 작성하는 시간을 가졌다. 내가 작성한 코드는 구글링과 지피티로 만든 작품이며 컴포넌트 분리하고 프롭스 넘기기 할 때나 직접 했다고 말 할 수 있겠다.  코드를 보면 전반적으로 이해는 되지만 빈 박스에 직접 코드를 써넣기에는 부족하다고 느껴서 그냥 암기하기로 했다.  두분의 튜터님 방에서 각자 화면공유를 하고 튜터님의 지시가 있을 때까지 너무 초조했다. 그러나 시작하자마자 바로 집중하여 암기했던 코드를 작성하기 시작했다. 처음에는 빨간줄도 많고 에러도 뜨고 했지만 당황하면 말리니까 차분하게 지우고 쓰고를 반복하며 손가락에 의지한 것 같다.  CRUD까지 구현 완료하고 선택사항으로 로컬스토리지와 메달 총 합계..

티스토리툴바