본문 바로가기
반응형

분류 전체보기266

Component & State & Props의 기본개념 Component - Component는 클래스형과 함수형이 있다. - 생김새와 용도가 다른데, React가 발전을 거듭하며 이젠 생김새만 다르다고 봐도 무방하다. - 리액트는 함수형 사용을 권장한다. - 리액트는 레고이고, 컴포넌트는 레고의 블럭이라고 생각하면 쉽다. Component란? 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야 한다. Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹사이트에 뿌려준다. 웹 사이트를 잘 조각낼 줄 아는 사람 = 리액트를 잘 쓰는 사람 아래와 같은 html이 있다. ... ... ... ... 위는 아래와 같이 컴포넌트로 쪼갤 수 있다. 즉, 이 웹 사이트는, 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는, , 컴포넌트로.. 2021. 8. 30.
JSX 사용하기 JSX란? - 리액트에서는 딱 하나의 빈껍데기인 html 파일만 존재한다. - public 폴더 아래에 있는 index.html - 리액트의 '뷰' 를 그리는 방법은, JSX를 통해 React 요소를 만들고 DOM에 렌더링 시킨다. - 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! - 하지만 JSX는 사용 가능 하다. (HTML을 품은 JS === JSX) - 아래는 리액트의 정식 홈페이지이다. JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 빈 껍데기인 HTML (index.html) JSX가 적용된 App.js import React from 'react'; imp.. 2021. 8. 30.
React 개발환경 설정 및 프로젝트 생성, 코딩 룰 VS CODE - React 코드 편집기로 사용. Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com Github Desktop - bash 창에서 command 를 입력할 필요 없이 GUI 로 구현되어 있는 깃허브.. 2021. 8. 26.
JS ES6 - Array 내장함수 0. Javascript Array- Array - JavaScript | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org 1. Map - map은 배열에 속한 항목을 변환할 때 많이 사용한다. - 어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어준다. - 즉, 원본 배열은 값이 변하지 않는다. const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값 console.log(ne.. 2021. 8. 26.
JS ES6 - Scope, =, Spread, 삼항연산자 스코프(Scope) 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 한다. 변수에 접근할 수 있는 범위. var: 함수 단위 let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있음.) const: block 단위(상수: 한번 선언한 값은 바꿀 수 없다.) function scope(){ const a = 0; let b = 0; var c = 0; // {} 증괄호 안에 든 내용을 블럭이라고 표현해요. if(a === 0){ const a = 1; let b = 1; var c = 1; console.log(a, b, c); // 1, 1, 1 } // c의 값은 변경되었다. // var는 함수 단위라서 if문 밖에서 선언한 값이 변한다. (영역이 .. 2021. 8. 26.
JS ES6 - Class 클래스란? 객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀. 객체를 정의하기 위한 상태와 함수로 구성되어 있고, 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용한다. 클래스의 구성 클래스 안에는 객체를 정의하기 위한 상태(property)와 함수가 있다. class Cat { // 생성자 함수 constructor(name) { // 여기서 this는 이 클래스입니다. this.name = name; } // 함수 showName(){ console.log(this.name); } } let cat = new Cat('perl'); cat.showName(); console.log(cat); 생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초.. 2021. 8. 26.
반응형

티스토리툴바