우당탕탕 아장아장

React 개념 정리 useRef 사용방법 const ref = useRef(value) 유용한 상황 1️⃣ 불필요한 렌더링 방지 (저장 공간) - State의 변화 ➡ 렌더링 ➡ 컴포넌트 변수들 초기화 - Ref의 변화 ➡ NO 렌더링 ➡ 변수들의 값이 유지됨 2️⃣ 손 쉽게 DOM 요소에 접근 - Doucument.querySelector() 와 비슷한 역할 ➡ 변화는 감지해야하지만, 그 변화가 랜더링을 발생시키면 안될 때! (로그인 버튼 등) useMemo - 컴포넌트 최적화를 위해 사용되는 Hook - 메모이제이션(Memoization) : 동일한 값을 리턴하는 함수를 반복적으로 호출해야 할 때, 맨 처음의 값을 메모리에 저장 후 필요할 때 마다 사용 ➡ 프로그램 실행 속도를 빠르게 하는 기술 함..

React 개념 정리 Context란? - 어플리케이션에서 전반적으로 사용할 값을 관리 (사용자 언어, 로그인 상태, UI 테마 등 환경 설정) - Context와 컴포넌트가 연동되면 재사용이 어려움⭐ - 한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다! useContext const value = useContext(MyContext); - 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할 useContext() 사용 방법 Context 객체 생성 import { createContext } from 'react'; // MyContext 객체 생성 const MyContext = createContext(); C..

State란? - 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태) State의 종류 - 클래스형 컴포넌트의 state 속성 (React Hooks가 나오기 이전에 사용) - 함수형 컴포넌트의 useState 함수 (16.8버전 이후) Hooks란? - 16.8버전 이후 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공 기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌 종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef 규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출 useState()..

리액트란? 자바스크립트의 UI 라이브러리로, "상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리" 그리고 이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택 Component 기반 Virtual DOM 사용 JSX 문법 사용 DOM(Document Object Model) 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 단어 그대로 정리하면 문서 객체 모델 MDN에서의 정의 HTML, XML 문서의 프로그래밍 interface DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할로, 브라우저는 CSS, HTML, 그리고 순수 자바스크립트 3 가지만 이해한다. 서로 ..

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 Rechart 원하는 데이터 뿌려주기 상위 컴포넌트로부터 받은 title, data, name, domain, stroke을 이용 title : 그래프 상단 제목 data : 그래프에 출력될 데이터 name : X축 값의 기준 domain : Y축 값의 범위 stroke : 선 색상 되는게 있고 안되는게 있나 보다..😣 나는 이 아이로 결정! 원하는 데이터 값을 뿌려줘봐야지! Try the demo in codesandbox >> 를 클릭 const data = [ { name: "Page A", uv: 4000, pv: 2400, amt: 2400 }, { name: "Page B", uv: 3000, pv: 1398, amt: 2210 }, { name:..

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 firebase data fetch 우리조 노션에 올라가있던 firebase data fetch방법! import React, { useEffect, useState } from "react"; const 폴더명 = () => { const [data, setData] = useState([]); const fetchdata = async () => { try { const res = await fetch( "firebase 경로" ); const result = await res.json(); setData([...result]); } catch (error) { console.log(error); } }; useEffect(() => { fetchdata..

git 오류 기록 git switch가 되지 않을 때 내 브런치에 commit과 push를 했는데, 실행이 되지 않았다. 그리고 하기전에 필요 없어 보이는 코드 주석처리를 했더니 다시 commit을 하라고 한다.. 커밋 후 내가 원하는 브랜치(develop)으로 이동 성공!! 간단하게 해결되서 즐거웠다..

React에서 Reacjarts 라이브러리 사용하기 Chart.js보다 쉬운듯 $ npm install recharts npm에서 install 해주기! 1. 필요한 차트 영역 선택 2. 당신이 원하는 그릴 요소들을 추가하기 3. 일부 구성 요소의 소품 조정 4. 상호작용 추가 5. 당신의 컴포넌트를 사용자 지정하기 엄~~청나게 다양한 차트들이 있음! 왜인지는 모르겠지만, 아래 파란 링크를 눌러서 복붙한다는 후기를 보고, 따라하기 ⭐⭐ 꼭 파란 링크 눌러서 복붙! 그리고 상단의 styles 경로 확인! ⭐⭐ 뜨는데, 이제 문제는 뜨는게 있고, 안뜨는게 있다는 것.... 차이가 뭔지 모르겠다😅😅

React 오류 기록 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') 🤯 문제 path 이름이 정의가 되지 않았다고 하는데, 그걸 어디서 정의하지? 직독직해 하는 기분.... 🥳 문제 해결 import { BrowserRouter, Route, Routes } from "react-router-dom"; ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ BrowserRouter안에 넣으니까 pathname도 찾나보다.. 드디어 화면에 뜬다!!!🤸🏻‍♀️🤸🏻‍♀️

React 오류 기록 Uncaught Error: useRoutes() may be used only in the context of a component. 🤯 문제 해석을 해 보자면, useRouter()는 로 감싸야 한다,, 라는데 이게 감싼게 아닌가보다.. 🥳 해결 방법 import { BrowserRouter as Route, Router, Routes } from "react-router-dom"; 로 감싸고, element 옆에 경로 제대로 설정 거짓말,, 또 다른 오류에 봉착!🤯🤯🤯 유쾌하지못한 오류 시리즈는 계속 된다😥😥😥😥😥😥