1️⃣ wildcard와 Navigate2️⃣ react에서의 스타일링props.path로 (asterisk) 를 넘겨주는 경우 모든 url에 대응(Route는 순서대로 동작하므로, 일반적으로 는 가장 아래 배치)<Navigate />: 해당 url로 페이지를 이

진상현 강사님의 리액트 강의 목차 > 1️⃣ 이전 실습 2️⃣ React router 이전 실습 • input value를 수정하면 3초 이후에 현재 value를 console.log 를 통해 1회 출력하는 컴포넌트 만들기 1초마다 input창 아래에 n초 뒤 콘

map 함수의 작동 순서 1. array의 자료 갯수만큼 함수안의 코드를 실행해줌. > > * 이러면 console에 1이 3번찍힘 2. 함수의 파라미터는 array안에 있던 자료임. > > * 이러면 console에 1,2,3이 차례대로 표시됨 3. ret

진상현 강사님의 리액트 강의 목차 > 1️⃣ useEffect 2️⃣ memoization 3️⃣ useCallback useEffect > side effect를 다룰 때 사용하는 hooks. 최초 render될때 1회 실행, 그다음부터는 dependency a

진상현 강사님의 리액트 강의 목차 > 1️⃣ useRef useRef useRef의 일반적인 사용법 ref를 넘겨주면, 해당 dom element 를 current에 담아줌 실습 1 >useRef를 사용하여, Click to Reset 버튼을 클릭하면 input

리액트 - 공식문서로 디테일 잡기 (고급) 목차 > 1️⃣ Hooks 2️⃣ Composition 3️⃣ HOC 4️⃣ Memoization 5️⃣ Context 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🧑🏻‍💻 오늘의 회고 1️⃣ Hooks Hook 이란? 공식

진상현 강사님의 리액트 강의 목차 > 1️⃣ state란? 2️⃣ useState를 이용한 state 관리 3️⃣ 일반적으로 React component가 다시 render되는 조건 4️⃣ state 업데이트의 비동기성 5️⃣ React Hooks란? 1️⃣ sta

리액트 - 공식문서로 디테일 잡기 목차 > 1️⃣ 공식문서를 보는 이유 2️⃣ 개발 환경 설정 3️⃣ JSX 4️⃣ Props 5️⃣ State 6️⃣ 컴포넌트 생명주기 7️⃣ 이벤트 8️⃣ 9️⃣ 🔟 1️⃣ 공식 문서를 보는 이유 > 라이브러리도 결국 사람이

1️⃣ Key와 리랜더링 알아보기2️⃣ 상태 끌어올리기3️⃣ 데이터 Fetch 해보기Key는 Value를 특정하는 이름완료 버튼 클릭시 해당 항목이 사라지고, 복구 버튼을 누르면 사라진 항목이 표시됨.코드공식 문서(https://developer.mozilla

진상현 강사님의 리액트 강의 목차 > 전 강의 복습 >꼭 요소가 return문 안에 들어 있을 필요는 없다 > > 이런식으로 사용 가능 조건부 rendering > jsx 렌더시 무시되는 값 > ![](https://velog.velcdn.com/image

진상현 강사님의 리액트 강의 CRA 란? > > package.json >package.json > 코드를 볼때 소스코드보다도 먼저 보는 경우가 많음 대충 어떤 코드인지 정보를 알 수 있음 > >eject -> ??? >localhost = 루프백 IP (1

1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을

1️⃣ 컴포넌트 상태 다루기2️⃣ 컴포넌트 사이드이펙트 다루기3️⃣ 커스텀 훅 만들기4️⃣ Hook Flow 이해하기공식문서useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예제: useSt

리액트 맛보기 2 리액트의 리렌더링 알아보기 >1️⃣ React는 변경된 곳만 렌더링한다. > >➡️ 굉장히 효율적이다! > >2️⃣ React는 불변객체(immutable)이다. >

😋 리액트 맛보기 🤨 리액트를 시작하기에 앞서... 리액트는 라이브러리의 구조를 가지고 있다. > 라이브러리 vs 프레임워크 > 라이브러리는 개발 편의를 위한 도구의 모음 프레임워크는 기반 구조까지 잡혀있음 > -> 라이브러리는 공구 -> 프레임워크는 공장

Bundler > 여러개의 파일을 하나의 파일로 묶어주는 역할을 함. > 참고 블로그 > Webpack vs Rollup vs Parcel > 위 세가지가 가장 많이 쓰이는 번들러임. > * Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)

TypeScript TypeScript 시작하기 TypeScript 란 무엇인가? > VS Code 설치 및 설정 > >1. "test.ts" 파일 생성 터미널에 npm init -y 입력 (현재 폴더를 npm project로 만듬) 터미널에 npm i ty

JS 데이터 실습 가져오기, 내보내기 자바스크립트에서 데이터를 내보낼때, 기본 통로와 이름을 지정하는 통로 두가지가 있음. > 기본 통로의 경우 (default) > > 기본 통로 예시 > > > 이름을 지정하는 통로 > 사용 예시 > > >📌 기본

JS 데이터 목차 >1. 문자 숫자와 수학 배열 객체 구조 분해 할당 전개 연산자 불변성 얕은 복사와 깊은 복사 문자 (string) >String 전역 객체는, 문자열(문자의 나열)의 생성자이다. 종류 String.length 문자열의 길이 반환 Strin

JS 클래스 ❗️ 생성자 함수(prototype) 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 있다. 이때, new연산자와 생성자 함수를 사용하면, 유사한 객체 여러개를 쉽게 만들 수 있다. > > 생성자 함수 만드는 법 함수 이름의 첫글자는 대문자로 시