https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com Router 페이지 이동 * 기존 웹페이지는 여러개의 페이지를 사용 (새로운 페이지를 로드하는 방식) 서브페이지 * 리액트는 sap 방식 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형..

App.js import './App.css'; import styled from 'styled-components'; import Header from './components/Header'; import Content from './components/Content'; import { BookProvider } from './context/BookContext'; const ContainerDiv = styled.div` width: 70%; margin: 0 auto; text-align: center; `; function App() { return ( ); } export default App; Context/BookContext.js import React,{createContext, useC..

터미널 열어서 yarn add react-icons styled-components 엔터 ! react-icons도 설치하고 styled-components도 설치한다는 뜻 컴포넌트 만들고 1. TodoTemplate 레이아웃을 설정하는 컴포넌트 페이지의 중앙에 그림자가 적용된 흰색박스 2. TodoHead 오늘의 날짜와 요일을 나타냄 앞으로 해야 할 일이 몇개 남았는지 보여줌 3. TodoList 할 일에 대한 정보가 들어있는 todos 배열을 내장함수 map을 사용하여 여러개의 Todoitem 컴포넌트를 렌더링함 4. TodoItem 각 할 일에 대한 정보를 렌더링 해주는 컴포넌트 5. TodoCreate 새로운 할 일을 등록하는 컴포넌트 // 첫번째 방법 import { useContext } fr..

context API 1. 컨텍스트 만들기 const mycontext = createContext(기본값) App 2. 컨텍스트 값 사용하기 const user = useContext(MyContext) context-react 1. MainPage.js 2. Header.js 3. Footer.js 4. Content.js App.js import './App.css'; import MainPage from './components/MainPage'; import { useState } from 'react' import { ThemeContext } from './context/ThemeContext'; function App() { const [ isDark, setIsDark ] = useSta..

useState (값만 관리) const [ state, setState] useState(초기값) setState(state + 1) ex> const [ number, setNumber ] = useState(0) Counter2.js (useState 버전) import React, { useState } from 'react'; const Counter2 = (props) => { // let number = 0; const [ number, setNumber ] = useState(0); // 기본값은 0이다 function Increase() { setNumber(number+1); } function Decrease() { setNumber(number-1); } return ( {numbe..

https://classic.yarnpkg.com/lang/en/ Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com npm -> yarn yarn을 설치한 이후 yarn start = npm start 리액트 컴포넌트 스타일링하기 1. scss 사용하기 yarn add node-sass (터미널 열어서 이거 치면 설치됨) yarn add node-sass@4.14.1 npm install --save-dev sass sass-loader mini-css-extract-plugin 2. CSS Module css 클래스 중첩되는 것을 방지 .module.css style.module.css .box{ background: ..

App.js import './App.css'; import { useState, useRef } from 'react'; import CreateTodo from './components/CreateTodo'; import TodoList from './components/TodoList'; function App() { const [ inputs, setInputs ] = useState({ todo:"", }); const onChange = (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]:value }) console.log(inputs); } const { todo } = inputs; const [ todos, ..

ref(reference): DOM에 이름달기 1. 클래스형 컴포넌트 1) ref객체 생성 input = React.createRef(); 2) DOM요소 ref속성으로 지정 3) DOM요소 접근 this.input.current 2. 함수형 컴포넌트 1) useRef import import { useRef } from 'react'; 2) ref 객체 const input = useRef(); 3) DOM요소 지정 4) DOM요소 접근 input.current App.js import './App.css'; // import RefInput from './Components/RefInput'; // import EventInputClass from './Components/EventinputClass..

* 컴포넌트 -> 함수형 컴포넌트, 클래스형 컴포넌트 function 이름 () { return ; } const 이름 = () => { return ; } class 이름 extends Component { render() { return() } } * props -> properties를 줄인 표현, 컴포넌트 속성 자식 컴포넌트를 사용하는 부모 컴포넌트에서 설정해서 자식 컴포넌트에게 전달 const App = () => { return 하하하하하 } cosnt MyComponent = (props) => { const name = props.name const age = props.age; const { name, age } = props; return } cosnt MyComponent = ({ n..

* React - 웹 프레임워크 자바스크립트의 라이브러리 중 하나 - 사용자의 인터페이스를 만들기 위해 사용됨 - facebook에서 제공하는 프론트엔드 라이브러리 - 싱글페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용됨 - 웹 / 앱의 View를 개발할 수 있는 라이브러리임 자바스크립트 라이브러리 - 앵귤러, 뷰, 리액트 (하나를 하면 나머지도 금방 할 수 있음) html, css, javascript ---> 앵귤러, 뷰, 리액트 - 옛날 방식 html, css, javascript index.html, sub1.html, sub2.html css-style.css js-main.js nav.js document.querySelector() ---> 파일이 너무 많음 -이를 보완한 react ..