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, ..

라이프 사이클 - 수명주기 컴포넌트의 수명은 페이지에 랜더링 되기 전인 준비 과정 -> 페이지에서 사라질 때 끝남 라이프 사이클 메서드 - 클래스 컴포넌트 함수형 컴포넌트 Hooks 기능을 사용하여 처리 Hooks 1) useState 2) useRef 3) useEffect 마운트, 업데이트, 언마운트 1) 마운트: 페이지에 컴포넌트가 나타남 constructor: 컴포넌트 새로 만들 때마다 호출되는 클래자 생성자 메서드 -> getDerivedStateFromProps: props에 있는 값은 state에 넣을 때 사용되는 메서드 -> render: 우리가 준비한 UI를 랜더링하는 메서드 -> componentDidMount: 컴포넌트 웹 브라우저상에 나타난 후 호출되는 메서드 2) 업데이트: 컴포넌..

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 ..