분류 전체보기44 리액트 라우터 사용하기 저번에 만들었던 Todo에 이어서 라우터를 연습하자 import React, { useState, useCallback, useRef } from "react"; import "./TodoTemplate.css"; import TodoList from "./TodoList"; import TodoInsert from "./TodoInsert"; import styled from "styled-components"; const TodoTemplateBlock = styled.div` display:flex; width:768px; margin: 0 auto; margin-top: 100px; @media screen and (max-width:768px){ width:100%; } ` const TodoL.. 2020. 1. 15. 속성 간단정리 태그 속성 target 링크한 url을 표시할 위치 rel 하나의 스페이스로 구분하는 연결한 url과의 관계를 나타내는 링크유형 참고: target을 사용할 때, rel="noreferrer"를 추가해 window.opener의 악의적인 사용을 방지하는걸 고려하세요. 참고: target="_blank"를 사용해 다른 페이지를 열면, 기존 페이지와 새 페이지가 같은 프로세스에서 돌아갑니다. 따라서 새 페이지에서 비싼 JavaScript 연산을 하는 순간 기존 페이지 성능에 악영향을 줄 수 있습니다. 이 현상을 피하려면 rel="noreferrer noopener"를 추가하세요. input autocomplate 는 자동완성 기능. button 의 속성에서 disabled 속성 은 해당버튼을 비활성화 시킨다 2020. 1. 14. css 속성 + 연산자는 선택자의 인접한 바로 뒤에 있는 요소만 선택한다. :hover 의사코드 마우스가 올라갈 때 바꿀 수 있는 css @media 반응형 웹을 하기위한 기준을 택하는 것. 2020. 1. 14. 간단한 TodoList만들기 - (2) 1편 에 이어서 시작! 1편에서 만들어 놨던 각각의 컴포넌트들을 App.js에 추가 해준 컴포넌트들에서 각각의 리스트 아이템을 보여주기 위해서 훅을 사용한다. import React, { useState } from 'react'; import './App.css' import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; const App = () => { const [todos, setTodos] = useState([ { id:1, contents: '리액트 연습', check: true },.. 2020. 1. 13. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
