쿵스보이

1. 부트 스트랩을 사용 하기 위한 react-bootstrap를 install한다. npm install react-bootstrap bootstrap Stylesheets 중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해줍니다. import 'bootstrap/dist/css/bootstrap.min.css'; 만약 추가하지 않는다면 부트스트랩의 스타일은 적용되지 않습니다. 아래의 사이트를 찾아가 쓸만한 컴포넌트를 찾아 본다. https://react-bootstrap.netlify.app/getting-started/introduction/ React-Bootstrap The most popular front-end framework, rebuilt ..

1. 리액트에서 URL 값에 따른 View를 보여주는 라우터를 제공. 2. React Router Don 사용 방법. npm i react-router-dom 3. Link 사용법 Link 와 같은 태그를 사용할 경우에도 위와 동일한 결과가 나오겠네? 아니, 사용하면 안 된다. Route를 사용하는 이유는 현재 페이지에서 상태를 유지하면서 바뀐 주소에 따라 바뀐 화면만 보이고 싶을 뿐인데, a태그를 사용할 경우, 상태가 전부 날라가버린다. 또 기존의 렌더링된 컴포넌트를 다 날려버리고 처음부터 렌더링이 진행된다. 위에서 썼던 이 부분을 기억하자. HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해준다.(즉, 페이지 변경으로 인한 깜빡거림이 없다.) 이 부분..

첫번째 사용하는 경우 //useRef 변화는 감지해야 되지만, 렌더링은 하고 싶지 않을때. //useRef 변화는 감지해야 되지만, 렌더링은 하고 싶지 않을때. function RefTest() { const [count,setCount] = useState(0); const countRef = useRef(0); console.log(countRef); console.log("호출되고 있음"); const increaseCountState = () =>{ setCount(count +1); }; const increaseCountRef = () =>{ countRef.current = countRef.current + 1; }; return ( State :{count} Ref :{countRef.cu..

빈배열 일때는 1. 타이머 했다면 타이머 정리, 구독을 했다면 구독 정리, 리스너를 등록 했다면 리스너 정리. 예제) import { useRef, useState,useEffect } from "react"; const UseEffectExample = () => { const [name, setName] = useState(""); const [count, setCount] = useState(0); const handleChangeName = (e) => setName(e.target.value); const handleCountUp = () => setCount(count + 1); // name이 바뀔 때만 실행 useEffect(() => { console.log("name 렌더링!"); co..

1.props 와 state 의 차이 - props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 - state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. 위의 값들의 변화는 Rendering 의 대상이 됨 2.Hook 이란? 클래스형 컴포넌트의 복잡함을 극복하고, 좀더 함수형 컴포넌트로 사용 할수 있도록 재사용성을 높임. 2. Hook API 기본 Hook useState useEffect useContext useRef 추가 Hooks useReducer useCallback useMemo useImperativeHandle useLayoutEffect useDebugValue

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. var people = [ { name: "Mike Smith", family: { mother: "Jane Smith", father: "Harry Smith", sister: "Samantha Smith" }, age: 35 }, { name: "Tom Jones", family: { mother: "Norah Jones", father: "Richard Jones", brother: "Howard Jones" }, age: 25 } ]; for (var {name: n, family: { father: f } } of people) { console.log("Name: ..

리덕스 구조: 첫눈에 이해하기는 쉽지 않겠지만, 이를 짧게 요약해보자면 다음과 같습니다. 1. 데이터(상태값)는 스토어에 저장됨. 2. 리듀서 함수는 정해진 액션에 따라 스토어에 담긴 데이터를 조작함. 3. 리듀서는 직접 실행할 수 없고, 디스패치 라는 함수를 호출해 실행함.

Prettier, ESLint, Snippet ,html to jsx https://react.vlpt.us/basic/27-useful-tools.html 27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet · GitBook 27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet 이번에는 리액트 개발을 할 때 사용하면 편리한 도구들에 대하여 알아보도록 하겠습니다. 이번에 다루게 되는 도구들은 모두 react.vlpt.us

Facebook 개발자들이 만듦. 리액트 -> Ajax ->(데이터 변경 감지) -> UI 자동 업데이트 1.환경준비 -node.js 설치 (10버전이상) https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. npx 버전 확인 - 자바스트립계의 Maven 과 Gradle - npm ->라이브러리다운 -> 빌드 -> 프로젝트다수(로컬에 다 다운) - npx ->라이브러리다운 -> 빌드 -> 프로젝트다수(다운 받은 걸 재사용, 없으면 다운) -> 실행 ->삭제 3. 확장 프로그램 설치 1. ESLint 설치 - 구문 분석- ..