MD 기록저장소

리액트에서는 데이터를 저장하는 방법으로 변수 외에 또 다른 방법이 하나 더 있습니다. state 라는 것인데요 이에 대해 공부해보겠습니다. 1️⃣ state 사용하는 방법 import React, { useState } from 'react'; App.js 파일 최상단에 있는 코드에 { useState } 라는 것을 추가해줍니다. 리액트 내장함수인 useState를 사용하겠다는 뜻입니다. 그러면 이제 useState함수를 사용할 수 있습니다. 사용방법: useState('넣고 싶은 데이터') 이렇게 useState 함수를 사용하면 그 자리에 두 개가 남습니다. Array 형식으로 남게 됩니다. 그래서 state를 변수에 할당할 때 보통 구조분해 할당 문법을 이용하여 저장합니다. let [a, b] = u..

리액트 프로젝트에서는 메인으로 작업하는 페이지가 App.js 파일입니다. 이 파일에서 HTML도 작성할 수 있습니다. function App() { return ( ) } return 뒤에 오는 소괄호 안에 HTML을 바로 작성해주면 됩니다. 그런데 사실 이 안에 작성되는 엄밀히 말해서 HTML이 아닙니다. 여기에 사용되는 문법을 JSX 문법이라고 합니다. 생긴 건 HTML과 비슷하지만 문법이 조금씩 다릅니다. 왜냐하면 JSX가 쓰이는 파일이 App.js 파일, 즉 자바스크립트 문법이기 때문입니다. 그렇지만 HTML 파일을 작성할 때와 거의 비슷하기는 합니다. 다만 좀 차이가 나는 지점이 있는데요. 차이가 나는 지점 위주로 공부해보겠습니다. 1️⃣ div에 class를 주고 싶을 때 div에 클래스를 주..

async와 await 키워드는 promise가 너무 복잡해서 쓰기 싫을 때 사용할 수 있는 대체품 같은 것이라 할 수 있습니다. async는 함수 앞에만 사용할 수 있다는 특징이 있습니다. await은 async 함수 안에서만 사용할 수 있습니다. 1️⃣ async 사용법 함수 앞에 async 키워드를 붙인 상태로 만들면 저절로 Promise 오브젝트가 만들어집니다. async function add() { 1+1; } 이렇게 함수를 만들면 함수 자체가 곧 Promise가 됩니다. 그래서 뒤에 then을 붙일 수 있습니다. async function add() { 1+1; } add.then(()=>{ console.log('성공'); } 이렇게 하면 콘솔에 '성공'이라는 글자가 출력됩니다. promi..

Promise 역시 콜백함수와 마찬가지로 디자인패턴 중 하나입니다. 1️⃣ Promise 만들기 const promise1 = new Promise(); 이렇게 해주면 promise가 만들어진 것입니다. 이제 promise1 뒤에 then, catch, finally 등을 사용해서 코드를 작성할 수 있습니다. then은 프로미스 안의 코드가 성공했을 때 실행하는 것이고 catch는 프로미스 안의 코드가 실패했을 때 실행하는 것이고 finally는 프로미스 안의 코드의 성공과 실패에 상관없이 실행시키는 것입니다. 사실 promise를 만들 때는 Promise 안에 코드를 넣어줘서 만들어야 합니다. 자세한 건 차차 공부해보겠습니다. 2️⃣ Promise 사용하기 프로미스의 정체는 사실 성공과 실패를 판단해주..

1️⃣ 동기식(synchronous) 처리 자바스크립트는 기본적으로 동기식(synchronous)처리 언어입니다. 이 말이 무슨 뜻이냐 하면 코드를 한 번에 한 줄씩 처리한다는 뜻입니다. console.log(1); console.log(2); console.log(3); 코드를 이렇게 작성하고 콘솔을 보면 1, 2, 3이 순서대로 한 줄 씩 출력되는 것을 확인할 수 있습니다. 자바스크립트를 실행하는 웹 브라우저에는 stack이라는 공간이 있는데 코드를 그 stack에 보관하고 있다가 한 줄 씩 처리하는 것입니다. 2️⃣ 비동기식(asynchronous) 처리 그런데 자바스크립트에서는 비동기식 처리도 가능합니다. console.log(1); setTimeout(function(){}, 1000); con..

Destructuring은 구조분해 할당이라고도 합니다. 변수에 값을 할당할 때 ES6 문법에서 새롭게 추가된 개념입니다. 1️⃣ Array 안에 들어있는 데이터를 변수에 담는 방법 const array = [2,3,4]; 위와 같은 array가 있습니다. 이 때 array 안의 자료를 각각 a,b,c 에 할당하고 싶다면 어떻게 해야될까요? const a = array[0]; const b = array[1]; 이렇게 하면 할 수 있지만 조금은 비효율적인 것처럼 보입니다. 구조분해 할당을 이 때 활용할 수 있습니다. const [a,b,c] = [2,3,4] 이렇게 해주면 됩니다. 왼쪽의 변수의 개수와 넣을 데이터의 개수를 일치시켜서 만들어 주면 됩니다. 그러면 만약에 개수가 서로 일치하지 않으면 어떻게..

const data = { odd: [ ], even: [ ] } (1) data 오브젝트에는 setter 역할 함수가 하나 필요합니다. setter 함수에 1,2,3,4 이렇게 아무 자연수나 파라미터로 입력하면 홀수는 odd, 짝수는 even 이라는 속성에 array 형태로 저장되어야합니다. (2) data 오브젝트에는 getter 역할 함수가 하나 필요합니다. getter 함수를 사용하면 odd, even에 저장된 모든 데이터들이 숫자순으로 정렬되어 출력되어야합니다. 예를 들면 data.setter함수(1,2,3,4,5) 이렇게 입력하면 data = { odd : [1,3,5], even : [2,4] } 이렇게 저장이 되어야합니다. const data = { odd: [], even: [], sor..

최근 코딩 트렌드로 원본 데이터는 변경 불가능하게 하는 것이 대세입니다. 원본 데이터는 그대로 두고 함수로 데이터를 수정하거나 뽑아 쓰는 추세로 가고 있습니다. 이런 흐름에 따라 나타난 것이 getter와 setter 입니다. getter 와 setter를 살펴보기에 앞서 object 내에 함수를 만들어 데이터를 조작하는 법에 대해 알아보겠습니다. 1️⃣ 원본데이터를 그대로 두고 데이터를 뽑아오는 법 const person = { name: 'kim', age: 30 } person 오브젝트가 있습니다. 이런 상태에서 내년 나이를 출력하고 싶으면 어떻게 하면 될까요? 가장 먼저 떠오르는 방법은 person.age = 31 이렇게 직접적으로 원본데이터를 수정해주는 것입니다. 그런데 요즘 트렌드에는 맞지 않..

상속을 시켜주는 방법으로 지금까지 constructor, prototype을 공부했습니다. 마지막으로 배울 것은 Class입니다. class를 사용하는 방법은 다음과 같습니다. 1️⃣ class 만드는 법 class Parent() { constructor(){ this.name = 'kim'; } } const child = new Parent(); 기존에 배웠던 constructor와 크게 다르지 않습니다. 차이점은 class라고 선언한 것 안에 constructor를 만들어준다는 점입니다. 2️⃣ class 안에 상속 가능한 함수 만드는 방법 1. constructor 안에 만들어 주기 class Parent() { constructor(){ this.name = 'kim'; this.sayHi =..

1️⃣ Prototype 개념 객체지향1 - Constructor에서 Constructor의 내용을 Instance에 그대로 넘겨주는 것을 객체지향 용어로 Inheritance(상속)이라고 합니다. 이 때 Constructor를 '부모', Instance를 '자식'이라는 관계에 빗대어 많이 설명합니다. 이런 상속을 가능하게 하는 자바스크립트만의 고유한 장치가 하나 더 있는데 바로 Prototype입니다. Prototype은 Constructor를 만들 때 내부에 자동으로 생성되는 항목입니다. 좀 더 이해하기 쉽게 비유적으로 설명하자면 prototype은 '부모의 유전자' 라고 생각하면 이해가 쉽습니다. function Student(){ this.name = 'Kim'; this.age = 15; } c..