본문 바로가기

자바스크립트99

[React] 4. JSX란 무엇일까? 안녕하세요. 박기린 입니다. 이번엔 React 컴포넌트의 핵심 중 하나인 JSX에 대해 알아보겠습니다. 엄청 간단한 JSX // React 컴포넌트의 JSX 부분 return ( Let's get started! ) React 컴포넌트는 JSX라는 것을 사용합니다. JSX를 통해서 HTML 코드를 사용할 수 있게 된다는 것은 알고 있지만, 단순히 함수에 return() 안에다가 HTML 또는 컴포넌트를 입력만 하면 자동으로 홈페이지에 출력이 된다는 점이 아리송합니다. 과연 원리가 무엇일까요? JSX의 원리 React.createElement() create-react-app으로 만든 리액트 앱의 package.json을 가면, 위의 사진처럼 react, react-dom이라는 모듈을 확인할 수 있습니다... 2023. 2. 7.
[React] 3. props / props.children 컴포지션 안녕하세요. 박기린 입니다. 이번에는 React 컴포넌트의 핵심 중 하나인 props에 대해 알아보겠습니다. props의 역할 React 컴포넌트는 다른 컴포넌트(파일)의 데이터를 바로 가져올 수 없습니다. 그래서 HTML의 태그가 attribute를 이용해서 데이터를 주고받는 것처럼, React 컴포넌트도 props라는 것을 이용해서 데이터를 주고받습니다. props를 전달하는 방법 // App.js function App() { const expenses = [ { id: "e1", title: "Car Insurance", amoount: 294.67, date: new Date(2022, 2, 20), }, ]; return ( {/* 소문자로 시작 - html */} Let's get start.. 2023. 2. 7.
[React] 2. 컴포넌트(Component) 안녕하세요. 박기린 입니다. 이번엔 리액트의 핵심인 컴포넌트(Component)를 만들어봅시다. 컴포넌트 만들기 // App.js import ExpenseItem from './components/ExpenseItem'; function App() { return ( // JSX Let's get started! // 소문자 // 대문자 ); } export default App; 리액트의 컴포넌트는 '함수형 컴포넌트'라고 부릅니다. 즉, JavaScript의 함수를 사용하기 때문에 function 키워드나 화살표 함수를 사용해서 컴포넌트를 생성할 수 있습니다. class형 컴포넌트도 있으나, 최신 React 버전에는 대부분 함수형 컴포넌트를 사용하기에 설명을 생략하겠습니다. JSX return ( L.. 2023. 2. 6.
[React] 1. 리액트에 대한 사전 지식 안녕하세요. 박기린 입니다. 자바스크립트에 이어서, 이번에는 JavaScript의 client-side 라이브러리인 React에 대해 알아보겠습니다. 왜 자바스크립트보다 리액트인가요? 요약하자면, 반응형 웹을 쉽고 빠르게 만들 수 있기 때문입니다. 페이지의 버튼을 누르면 글자가 바뀌는 사이트가 있다고 가정을 합니다. JS는 querySelector()로 글자가 담긴 텍스트를 찾은 후에, textContent property를 수정해주고, 변화한 값이 스크린에 보여질 수 있도록 DOM을 편집해주고 등등 아주 많은 과정을 직접 적어줘야 합니다. 하지만 React는 정말 간단하게 이를 구현할 수 있습니다. Single Page Applications (SPAs) 리액트는 싱글 페이지 앱이라는 말을 자주 들으실.. 2023. 2. 3.
[JS] 65. Class 상속 in ES6 안녕하세요. 박기린 입니다. ES6의 class 방식으로 inheritance(상속)을 구현하는 방법에 대해 알아보겠습니다. Inheritance between Classes in ES6 class PersonCl { constructor(fullName, birthYear) { this.fullName = fullName; this.birthYear = birthYear; } calcAge() { console.log(2023 - this.birthYear ); } static hey() { console.log('Hey there'); console.log(this); } }; 우선 위와 같은 PersonCl class가 있다고 가정을 합니다. 사람의 정보를 담은 클래스인데, 이 클래스를 상속받아서 .. 2023. 2. 1.
[JS] 64. Static Methods in Class 안녕하세요. 박기린 입니다. Static Methods Array.from(), Number.parseFloat()과 같이 프로토타입에서는 쓸 수 없고, Class 원형 그 자체에서만 쓸 수 있는 내장함수들과 같이, 프로토타입으로 상속이 되지 않는 메소드들을 Static Methods라고 부릅니다. +) 프로토타입에 대한 설명이 담긴 글 : https://arnopark.tistory.com/574 ES6 방식으로 구현하기 +) ES6 Class에 대한 설명이 담긴 글 : https://arnopark.tistory.com/575 class PersonCl { constructor(fullName, birthYear) { this.fullName = fullName; this.birthYear = bir.. 2023. 1. 31.
[JS] 63. Setter와 Getter 안녕하세요. 박기린 입니다. Accessor Properties JS의 모든 Object는 getter와 setter를 가질 수 있습니다. 이 둘은 함수이자, Object 내부의 값을 획득하거나 새로 지정하는 함수가 담긴 property입니다. 이를 Accessor property(접근자 프로퍼티-속성)라고 부릅니다. Get and Set const account = { owner: 'Jonas', movements: [200, 530, 120, 300], get latest() { return this.movements.slice(-1).pop(); }, set latest(mov) { this.movements.push(mov); }, }; getter와 setter는 object 내에서 'get',.. 2023. 1. 30.
[JS] 61. 생성자 함수와 new 연산자/프로토타입 상속과 체인 안녕하세요. 박기린 입니다. 이번엔 객체 지향 프로그래밍(OOP - Object Oriented Programming)의 class를 생성하는 방법에 대해 알아보겠습니다. 생성자 함수와 new 연산자 자바스크립트에서는 생성자 함수와 new 연산자를 이용해서 class를 생성할 수 있습니다. 이 방식은 JavaScript의 구식 방식으로, 앞으로 소개해드릴 모든 자바스크립트 class 생성 방법의 근간이 되는 방식입니다. 다른 언어와는 다른 부분이 많다보니 헷갈릴 수도 있습니다. const Person = function(firstName, birthYear) { // Instance properties this.firstName = firstName; this.birthYear = birthYear; }.. 2023. 1. 11.
[JS] 60. 타이머 : setTimeout & setInterval 안녕하세요. 박기린 입니다. 이번에는 JS에서 타이머를 설정하는 방법에 대해 알아보겠습니다. setTimeout() const ingredients = ['olives', 'spinach']; const pizzaTimer = setTimeout( (ing1, ing2) => console.log(`Here is your pizza with ${ing1} and ${ing2} 🍕`), 3000, ...ingredients ); setTimeout( 콜백함수, 밀리초, 콜백함수에 들어올 인수들 ) setTimeout()은 특정 시간이 지나면 콜백함수를 불러오는 JS 내장함수 입니다. 이때, 단 한 번만 콜백함수를 불러옵니다. 실행한 후 3초를 기다리면 함수가 실행됨을 확인할 수 있습니다. clearTime.. 2023. 1. 10.