Front-end
-
[React] Map 알아보기Front-end/React 2020. 11. 29. 23:35
map 배열을 렌더링 할 때 편리하게 렌더링 하도록 도와줍니다. map 사용하기 배열.map() 으로 선언합니다. import React from "react"; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: "junjang1", email: "junjang.see1@gmail.com", }, { id: 2, username: "junjang2", email: "junjang.see2@gmail.com", }, { id: 3, username: "junjang3", email: "junjang.see3@gmail.com", ..
-
[React] Props 알아보기Front-end/React 2020. 11. 29. 23:32
props properties의 줄임말이며 컴포넌트를 사용할 때 특정 값을 전달해주고 싶을 때 사용하는 것입니다. props 전달하기 import React from "react"; import Hello from "./Hello"; function App() { return ; } export default App; Hello JSX에 name="react" 라는 값을 보냅니다. props 받아내기 import React from "react"; function Hello(props) { console.log(props); // {name: "react"} console.log(props.name); // react return 안녕하세요; } export default Hello; 받아온 props는..
-
[React] JSX 알아보기Front-end/React 2020. 11. 29. 23:29
JSX JSX는 리액트에서 생김새를 정의할 때 사용하는 문법입니다. HTML 같이 생겼지만 실제로는 자바스크립트입니다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 자바스크립트로 변환을 해줍니다. 하지만 모든 경우에서 이렇게 변환시켜주지 않고 규칙을 따라야 합니다. 이에 대해 알아보겠습니다. 꼭 태그를 닫아야한다. import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 쌍으로 필요한 div 태그를 예로 들면 닫힌 태그(/)가 없을 경우 에러를 발생시킵니다. self closing을 해야한다. import React from "react";..
-
[React] 컴포넌트 알아보기Front-end/React 2020. 11. 29. 23:25
컴포넌트 컴포넌트는 독립적으로 사용가능한 모듈인데요 컴포넌트 하나를 구현하여 어디서든 독립적으로 사용할 수 있게 할 수 있어야합니다. 컴포넌트를 만들 땐 몇가지 필수적으로 넣어주어야 하는 것이 있습니다. 리액트 사용하기 import React from "react"; react를 가져와서 사용하겠다는 것을 의미합니다. 클래스 컴포넌트 import React, { Component } from "react"; class Hello extends Component { render() { return ( 안녕하세요 ); } } Component를 가져와서 상속받아 사용해야합니다. 최근에는 Hooks + 함수형 컴포넌트로 인해 많이 사용되고 있는 패턴은 아닙니다. 함수 컴포넌트 import React from ..
-
[JS] 펼침 연산자 사용하기Front-end/Javascript 2020. 11. 29. 22:43
펼침 연산자 ES6이후 사용되다가 ES8에 정식적으로 포함된 기능입니다. ...을 통해 객체를 복사할 수 있습니다. 기존 객체에 추가 const book = { title: '코딩의 기술', author: 'Joe Morgan', }; const update = { ...book, year: 2019 }; // {title: "코딩의 기술", author: "Joe Morgan", year: 2019} 기존 객체를 갱신 const book = { title: '코딩의 기술', author: 'Joe Morgan', }; const update = { ...book, title: '자바스크립트 코딩의 기술' }; // {title: "자바스크립트 코딩의 기술", author: "Joe Morgan"} 객체..
-
[JS] async - await 알아보기Front-end/Javascript 2020. 11. 29. 22:37
Async - Await 비동기 작업을 진행할 수 있도록 도와줍니다. ES7부터 추가되었습니다. Promise를 기반으로 하고 있기 때문에 Promise 개념을 알고 있어야 이해하기 편합니다. async / await resolve 기존에 Promise를 사용하여 비동기 로직을 수행할 때는 아래와 같습니다. function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }, 1000); }); } p(1000).then((ms) => { console.log(`${ms} ms 후에 실행됩니다.`); // 1000 ms 후에 실행됩니다. }); 만약 위 코드에서 async / await으로 호출하려면 어떻게..
-
[JS] 프로미스(Promise) 알아보기Front-end/Javascript 2020. 11. 29. 22:30
프로미스(Promise) 비동기 작업을 순차적으로 진행할 수 있도록 도와줍니다. ES6부터 추가되었습니다. 프로미스 객체 생성 생성자를 통해 프로미스 객체를 만들 수 있습니다. 생성자의 인자로는 executor 라는 함수를 사용합니다. new Promise(/* execuotor*/); executor 여기서 executor는 resolve와 reject를 인자로 가집니다. 이 두가지는 함수로서 resolve(), reject()로 표현됩니다. new Promise(/* execuotor*/ (resolve, reject) => {}); pending(대기) 생성자를 통해서 프로미스 객체를 만드는 순간 pending 상태가 됩니다. new Promise((resolve, reject) => {}); 위 ..
-
[JS] 클래스 알아보기Front-end/Javascript 2020. 11. 29. 22:26
클래스 클래스는 객체를 만들 수 있는 새로운 방법으로 ES6에서 추가되었습니다. 클래스 생성 방법 클래스는 함수와 다르게 호이스팅이 일어나지 않기 때문에 순서에 맞게 선언해주어야 합니다. 선언 방식 class A {} new A(); 변수 할당(표현식) 방식 const B = class {}; new B(); 생성자 class를 활용해 객체를 만들 때도 인자를 넣어서 생성할 수 있는데, 이 방법에 대해 알아보겠습니다. class Person { constructor(name, age) { console.log(`이 사람의 이름은 ${name}이며 나이는 ${age}입니다.`); } } new Person("junjang", 28); // 이 사람의 이름은 junjang이며 나이는 28입니다. new Pe..