JavaScript

React Router

리엑트 라우터란? React SPA에서 라우팅을 위해 가장 많이 사용하는 라이브러리입니다. 화면에 따라 달라지는 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 합니다. 하지만 React 자체에는 이 기능이 내장되어 있지 않습니다. 직접 React Router를 이용해 주소마다 다른 뷰를 보여줘야 합니다. 설치하기 / 개발환경 구축하기 //터미널창 //simpleroute 폴더에 React App 설치 npx create-react-app@latest simpleroute cd simpleroute // 해당폴더로 이동 npm start // 잘 실행되는지 확인 npm install react-router-dom@^6.3.0 // 설치 //js ..

function 대신 class?? class 사용법과 활용

ES6 부터 function 으로 함수를 작성하는 것 대신 class 로 작성할 수 있게 되었다. ex) class Car { constructor() { this.name = name; this.color = color; this.price = price; this.maxSpeed = maxSpeed; } start() { console.log(`${this.name} 출발합니다.`); } } Car 라는 클래스 속에 constructor메서드와 this를 이용해 속성을 작성해줄 수 있다. 또한~() 의 형식으로 매서드도 작성해 줄 수 있다. constructor 메서드는 같은 클래스 내에서 한번만 쓸 수있다. class 형태의 함수로 작성된 컴포넌트는 대문자로 시작해야 한다. extends 매서드를 ..

객체 지향 프로그래밍-클래스와 인스턴스

클래스와 인스턴스 class Car { constructor( brand, name, color ){ } } class 로 function 과 같은 함수를 표현할 수 있습니다.( 붕어빵 틀 ) constructor 로 인스턴스가 만들어질 때 실행되는 코드(속성)를 만들 수 있습니다. *생성자 함수는 return 값을 만들지 않습니다. 클래스의 새로운 인스턴스 만들기 let avante = new Car ( 'hyundai', 'avante', 'black' ) // brand : hyundai, name : avante ... let mini = new Car ( 'bmv', 'mini', 'white' ) // brand : bmv, name : mini ... new 키워드를 통해 Car의 인스턴스를..

spread문법과 rest 문법의 차이, 그리고 구조분해할당

spread 문법(전달인자에 사용) 배열을 풀어주어 전달인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // expected 6 배열에서 이용 spread 문법을 사용하면 기존의 배열을 변경하지 않고 복사해서 가져온다. 기존의 배열을 변경하려면 새롭게 할당해야한다. 배열을 합칠 수 있다. 객체에서 이용 let obj1 = { foo: 'bar', x: 42 }; let obj2 = { foo: 'baz', y: 13 }; let mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj) //e..