본문 바로가기

프론트엔드관련 책예제실습정리

 (32)
모달변경하기(UI state로 관리해보기) 1.state에는 데이터 뿐만 아니라 UI상태도 저장해서 사용한다. display: none block의 경우도 state 상태관리로 금방 만들수가 있다 2.jsx 안에서 if 문작성하려면 {삼항다항식} 을 사용한다. 삼항다항식에서 state의 조건을 변경시켜 UI를 조작하고, 원하는 태그에 적용시킬수 있음 [...] let [모달, 모달변경] = useState(false); return ( 따봉만들기실습 {모달 === true ? : null} {글제목[0]} 따봉변경(따봉 + 1)}> ✌{따봉} 버튼 {글제목[1]} 따봉변경(따봉 + 1)}> ✌{따봉} { 모달변경(true); }} > 모달보이기 {글제목[2]} 따봉변경(따봉 + 1)}> ✌{따봉} ); }; function Modal() { re..
13 리액트라우터로 SPA 개발하기 1.$ yarn create react-app router-tutorial $ cd router-tutorial $ yarn add react-router-dom 2.프로젝트에 라우터적용 BrowserRouter 컴포넌트를 감싸면 HTML5의 History ApI를 사용ㅎ아ㅕ 페이지를 새로고침하지 않고도 주소변경, 주소 관련 정보를 props로 조회 및 사용 할수 있다 //src/index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( ..
10 일정관리 어플리케이션(scss) //TodoTemplate.js .TodoTemplate { width: 512px; margin-left: auto; margin-right: auto; margin-top: 6rem; border-radius: 4px; overflow: hidden; .app-title { background: #22b8cf; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { background: white; } } //TodoInsert.scss .TodoInsert { display: flex; background: #495057; input { b..
10 일정관리 어플리케이션(js) //App.js import React, { useState, useRef, useCallback } from 'react'; import TodoTemplate from './component/TodoTemplate'; import TodoInsert from './component/TodoInsert'; import TodoList from './component/TodoList'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트기초알아보기', checked: true }, { id: 2, text: '컴포넌트 스타일링하기', checked: true }, { id: 3, text: '일정관리 앱만들어보기', c..
12-5 함수_ 매개변수 최대개수, return 반환문 규칙 //12-5 매개변수 최대개수 /*이상적인 함수는 한가지 일만 해야하며 가장 이상적인 매개변수는 0개~3개이다 jquery의 ajax 메서드 객체 인수로 전달하는 예*/ $.ajax[{ mathod:'POST', url:'/user', data:{id:1,name:'lee'}, cache:false }] //12-5 return 반환문 /* return문은 함수 내부에서만 실행된다. return 문 이후 다른문은 실행되지 않는다. 세미콜론 자동삽입기능이 추가된 경우 return 문 이후 줄바꿈 작성시 오류날수 있다.*/ { function multi(x,y){ return x*y //반환문 console.log(반환되지 않는다.) } console.log(multy(3,5)) //15 }
12-5 함수_인수확인(매개변수 인수전달시 부적절한 반환 방지) //12-5 인수확인 /*어떤타입의 인수가 전달되어야 하는지, 어떤 타입의 값을 반환해야하는지 명확하지 x (자바스크립트는 동적타입언어라 매개변수 타입을 사전에 지정할수x)*/ //1.매개변수를 통해 전달된 인수값이 부적절한 경우 에러 발생시키기 { function add(x,y){ if(typeof x !=='number' || typeof y !=='number'){ throw new TypeError('인수는 모두 숫자 값이어야 한다') } return x +y; } console.log(add(2))//TypeError 인수는 모두 숫자 값이어야 한다 console.log(add('a','b'))//TypeError 인수는 모두 숫자 값이어야 한다 } //2.인수가 전달되지 않은 경우 단축평가를 ..
12 함수호출(매개변수와 인수 값 일치 불일치) //매개변수는 스코프(유효범위) 함수 내부에서 동작, 인수는 값을 전달 //12.함수호출 - 매개변수의 갯수 { //인자갯수가 적을 경우 : 매개변수 값이 undefined 이므로 값은 NaN function add(x,y){ return x +y } console.log(add(2)) //NaN } { //인자갯수가 초과할경우: 남은 인수는 암묵적으로 arguments의 객체 프로퍼티로 보관 function add(x,y){ return x +y } console.log(add(2,3,4)) //5 }
객체의 얕은복사(shallow copy) 와 깊은복사(deep copy) / lodash 사용 /*얕은 복사와 깊은복사 얕은 복사(한단계): 객체를 프로퍼티 값으로 갖는 객체 깊은복사(객체에 중첩된 객체까지 복사) */ { const o = {x:{y:1}} //1. 얕은복사 const c1 = {...o} console.log(c1 === o ) //false console.log(c1.x === o.x) //true } //2.깊은복사 /*lodash의 cloneDeep 사용 npm i lodash설치후 node.js에서 실행*/ { const o = {x:{y:1}} const = require('lodash') const c2 = _.cloneDeep(o); console.log(c2===o)//false console.log(c2.x === o.x)//false }

티스토리툴바