노력이 좋아서

<step69>'react_axios2'

1) App.js import './App.css'; import Users from './components/Users'; import UsersReducer from './components/UsersReducer'; import Posts from './components/Posts'; import PostsReducer from './components/PostsReducer'; import UsersCustomHook from './components/UsersCustomHook'; function App() { return ( {/* */} {/* */} {/* */} {/* */} ); } export default App; useAsync.js import { useReducer, useE..

<step69>'react_axios'

1) App.js import './App.css'; import Users from './components/Users'; import UsersReducer from './components/UsersReducer'; import Posts from './components/Posts'; import PostsReducer from './components/PostsReducer'; function App() { return ( {/* */} {/* */} ); } export default App; Users.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; const Users = () => { // ..

<step69>'react_router'

1) App.js import './App.css'; import Header from './components/Header'; import Main from './components/Main'; import Product from './components/Product'; import DetailProduct from './components/DetailProduct'; import NotFound from './components/NotFound'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Detail1 from './components/Detail1'; import Detail2 from './components..

<step68>'react_mashup-booklist(useReducer + context API)'

1) 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; App.css * { margin: 0; padding: 0; box-sizing: border..

<step68>'react_mashup-todolist(useReducer + context API)'

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

<step68>'react_createContext'

1) 1. MainPage.js import React from 'react'; import Header from './Header'; import Content from './Content'; import Footer from './Footer'; const MainPage = () => { return ( ); }; export default MainPage; 2. Header.js import React, { useContext } from 'react'; import { ThemeContext } from '../context/ThemeContext'; const Header = () => { const {isDark} = useContext(ThemeContext); return ( Green ..

<step67>'react_useReducer'

1) Counter2.js // import React, { useState } from 'react'; import React, { useReducer } from 'react'; function reducer(state, action){ switch(action.type){ case "INCREASE": return state+1; case "DECREASE": return state-1; default: return state; } } const Counter2 = () => { // const [ number, setNumber ] = useState(0); // function Increase(){ // setNumber(number+1); // } // function Decrease(){ /..

<step66>'react_styledcomponents'

1) App.js import './App.css'; import styled from 'styled-components'; import Button from './components/Button.js'; import Dialog from './components/Dialog.js'; import { useState } from 'react'; import Box from './components/Box'; const AppBlock = styled.div` width: 512px; margin: 0 auto; margin-top: 50px; border: 1px solid black; padding: 10px; ` const Circle = styled.section` width: 100px; heig..

<step66>'react_scss'

1) App.js import './App.css'; import Buttons from './components/Buttons.js'; function App() { return ( Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button ); } export default App; App.css .App { width: 600px; margin: 0 auto; margin-top: 80px; border: 1px solid black; padding: 20px; } Button.scss $blue : #228be6; $gray : #495059; $pink : #f0659..

<step65>'react_useEffect'

1) App2.js import React,{ useEffect, useState } from 'react'; const App2 = () => { const [ count, setCount ] = useState(1); const [ input, setInput ] = useState(""); // componentDidMount && componentDidUpdate useEffect(()=>{ console.log('렌더링될 때마다 useEffect호출'); }) // useEffect에 두번째 인자로 []을 넘겨주면 마운트될 때만 호출됨 // componentDidMount useEffect(()=>{ console.log('처음 마운트될 때만 useEffect호출'); },[]) useEffec..