import React from 'react' import { useParams, NavLink, useSearchParams, useLocation } from "react-router-dom"; // import posts from '../postData' import './Post.css' function Post({ movies }){ const params = useParams(); let [searchParams, setSearchParams] = useSearchParams() const applyActiveColor = ({ isActive }) => (isActive ? {color: 'orangered'} : {}) const changeQueryString = (e) => { cons..

* 연습과제 0 import './App.css'; import Modal from './Modal'; import Button from './Button'; import { useState } from 'react'; function App() { const [open, setOpen] = useState(false) const openModal = () => { setOpen(true) } const closeModal = () => { setOpen(false) } return ( Add Todo You want to add new todo ? todo name: todo description: Add Close ); } export default App; * 연습과제 1 import './App...

* 연습과제 1 import './App.css'; import React, { Component } from 'react'; import youtubeVideos from './youtubeVideos' import Button from './Button' class App extends Component { state = { index: 0 } decreaseIndex = () => { const nextIndex = this.state.index - 1 this.setState({index: (nextIndex { const nextIndex = this.state.index..

* 연습과제 1 import './App.css'; import React from 'react' import styled, { css } from 'styled-components' const Button = styled.button` all: unset; color: white; cursor: pointer; border-radius: 5px; font-weight: bold; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; &:hover{ opacity: 0.7; } /* 버튼의 크기 설정 */ ${props => { const size = props.size || 'medium' switch..

* 연습과제 1 import React from 'react' import './Button.scss' function Button({ children, size, color, width, handleClick, disabled }){ return {children} } export default Button; Button.defaultProps = { size: 'medium', color: 'tomato', disabled: false } @use "sass:list"; $colors: blue, tomato, grey; $hover-colors: skyblue, lightsalmon, lightgray; $sizes: large, medium, small; $default-height: 50px; ..

* 연습과제 1 import Button from './Button' import './Nav.css' function Nav(){ const navigate = (url) => { window.location.href = url } return ( navigate("https://google.com")}>구글 navigate("https://naver.com")}>네이버 ) } export default Nav .nav-container{ display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 70px; box-shadow: 0 4px 10px 2px grey; position: fixed; z-index: ..

* 연습과제 2 import './App.css'; import React, { Component } from 'react' class App extends Component { state = { numbers: '' } pickRandomNumber = (min, max) => { return Math.floor( Math.random() * (max-min+1) ) + min } isDuplicated = (numbers, picked) => { return numbers.find(num => num === picked) } getLottoNum = (numbers) => { // console.log("length: ", numbers) const picked = this.pickRandomNumb..

* 연습과제 2 import './App.css'; import React, { Component } from 'react' class App extends Component { render(){ const users = [ {name: 'victoria', age: 13, city: 'seoul', email: 'victoria@gmail.com'}, {name: 'sun', age: 34, city: 'busan', email: 'sun@gmail.com'}, {name: 'johseb', age: 25, city: 'busan', email: 'johseb@gmail'}, // 탈락 {name: 'syleemomo', age: 9.23, city: 'seoul', email: 'syleemomo@n..

* 연습과제 1 import logo from './logo.svg'; import './App.css'; import React, { Component } from 'react'; class App extends Component { state = { cnt: 0 } countNumber = () => { this.setState({cnt: this.state.cnt + 1}) } render(){ const {cnt} = this.state return ( 카운트: {cnt} change name ) } } export default App; * 연습과제 2 import logo from './logo.svg'; import './App.css'; import React, { Component } f..

* 연습과제 1 import React from 'react'; class Friend extends React.Component { render() { const { name, age, city } = this.props return ( {name} {age} {city} ----------------- ) } } export default Friend; 해답 1 import logo from './logo.svg'; import './App.css'; import Friend from './Friend' function App() { return ( ); } export default App; 해답 2 import React, { Component } from 'react' import Friend ..