4.1 리액트의 이벤트 시스템 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 말합니다. 4.1.1 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성합니다. 예를 들어 HTML의 onclick은 리액트에서 onClick으로 작성해야 합니다. 또, onkeyup은 리액트에서 onKeyUp으로 작성합니다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다. DOM 요소에만 이벤트를 설정할 수 있습니다. 즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 ..

21-22/21-22 리액트 스타터 -1 2021. 11. 15. 13:00

3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지입니다 하나는 함수형 컴포넌트이고 다른 하나는 클래스형 컴포넌트입니다. import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트는 다음과 같이 이루어져 있습니다. 클래스형 컴포넌트이지만 역할을 이전에 보았던 함수형 컴포넌트와 같습니다. 하지만 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 메서드를 정의할 수 있다는 점에서 함수형 컴포넌트와 차이점이 있습니다. 클래스형 컴포넌트에서는 rende..

21-22/21-22 리액트 스타터 -1 2021. 11. 8. 18:46

2.1 코드 이해하기 import React from 'react'; 위 코드는 리액트를 불러와서 (import) 사용할 수 있게 해 주는 코드입니다. 리액트 프로젝트 제작 시 node_moudles 디렉터리 생성됨 → 이 디렉터리 안에 있는 react 모듈을 설치합니다. 모듈을 불러와서 사용하기는 브라우저에는 없던 기능입니다. → 브라우저에서도 사용하기 위해 **번들러(bunlder)**를 사용합니다. (Node.js에서 지원합니다.) 번들러 (bundler) 종류: 웹팩, Parcel, browserify 등 이 중, 리액트에서는 웹팩을 사용합니다. import(or require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다. 최적화 과정에서 여러 개의 파일로 분리..

21-22/21-22 리액트 스타터 -1 2021. 11. 1. 12:01

1.1 왜 리액트인가? 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효고를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 일렉트론(자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크)으로 슬랙, VS Code 등을 개발하고, 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크를 사용해 페이스북, 디스코드 등의 애플리케이션도 개발했습니다. 이러한 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용합니다. 이들이 지닌 공통점은 모델과 뷰가 있다는 것인데, 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역,..

21-22/21-22 리액트 스타터 -1 2021. 11. 1. 12:00

8. Objects 8-1. Objects 객체를 빼놓고 자바스크립트를 논하는 것은 불가능할 정도로, 객체는 자바스크립트의 많은 곳에 스며들어 있습니다. 객체를 배우지 않더라도 이미 자바스크립트를 사용하고 있었으니까요! 자바스크립트에서 다루는 데이터 유형은 총 7개인데, 이 중 6개는 기본 데이터 유형인 String, number, boolean, null, undefined, symbol입니다. 그리고 마지막 유형은 이번에 다룰 Object, 객체입니다. 8-1-1. Creating Object Literals (객체 리터럴 만들기) 객체는 다른 자바스크립트 유형과 마찬가지로 변수에 할당할 수 있습니다. 객체 리터럴을 지정하기 위해서는 아래와 같이 {}, 중괄호를 사용합니다. let spaceship ..

21-22/21-22 리액트 스타터 -1 2021. 10. 11. 14:02

7. lterators 7-1. Higher-Order Functions 고차함수는 다른 함수를 인수로 받아들이고 함수를 출력으로 반환하는 함수입니다. 7-1-1. Functions as Data (데이터로서의 기능) JavaScript 함수는 언어의 다른 데이터 유형처럼 작동합니다. 따라서 변수에 함수를 할당할 수 있고, 그것을 새로운 변수에 재할당할 수 있습니다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 위 코드는 함수의 이름이 길어 코드의 가독성을 해칩니다. 그렇다면 우리는 위에서 말했던 것처럼 함수를 변수에 할당하는 방법을 이용할 수 있습니다. const bus..

21-22/21-22 리액트 스타터 -1 2021. 10. 11. 14:01

6. Loops 루프는 일련의 명령을 반복하는 데 사용되는 프로그래밍 도구입니다. 반복은 루프 컨텍스트에서 "반복"을 의미하는 일반적인 용어입니다. 루프는 일반적으로 중지 조건으로 알려진 지정된 조건이 충족될 때까지 계속 반복됩니다. 6-1. Loop(루프) 루프는 정지 조건이라는 지정된 조건에 도달할 때까지 일련의 명령을 반복하는 프로그래밍 도구입니다. 코드에서 작업을 재사용해야할 경우 해당 작업을 함수에 번들링하는 경우가 많습니다. 마찬가지로, 프로세스가 연속해서 여러 번 반복되어야 할 때, 우리는 루프를 작성합니다. 루프를 사용하면 프로세스를 자동화하는 효율적인 코드를 만들어 확장 가능하고 관리가 용이한 프로그램을 만들 수 있습니다. 특정 조건이 충족될 때까지 작업을 반복하고, 조건이 충족되면 루프..

21-22/21-22 리액트 스타터 -1 2021. 10. 11. 14:00

5. Array 데이터를 구성하고 저장하는 것은 프로그래밍에서 가장 기본적인 개념입니다. 우리가 실생활에서 데이터를 구성하는 방법 중 한 가지는 목록을 만들어서 저장하는 것입니다. 이것을 자바스크립트에서는 배열로 작성할 수 있습니다. 배열은 목록을 작성하는 자바스크립트의 방식으로, 문자열, 숫자 등 모든 데이터 유형을 저장할 수 있습니다. 배열에도 순서가 매겨지며, 각 순서에는 할당된 위치가 생기게 됩니다. 5-1. Create an Array (배열 만들기) 배열을 만드는 방법에는 여러 가지가 있는데, 그중 한 가지는 배열 리터럴을 사용하는 것입니다. 배열 리터럴은 항목을 대괄호, []로 묶으면서 배열을 만듭니다. 앞서 배열은 모두 데이터 유형을 저장할 수 있다고 하였는데, 한 가지 배열에서 다른 데이..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:04

4. Scope 프로그래밍에서 가장 중요한 개념 중 하나인 범위, Scope는 "식별자 접근 규칙에 따른 유효 범위"라는 뜻입니다. 일부 변수, 전역 변수는 프로그램 어디에서나 접근이 가능하지만, 다른 변수, 지역 변수는 특정 구역에서만 사용할 수 있습니다. 이 범위를 우리는 스코프라고 부릅니다. 4-1. Blocks and Scope (블록과 스코프) 스코프에 대해 이야기하기 전, 블록에 대해 먼저 이야기해 봅시다. 블록은 함수와 if 명령문 등에서 사용하는 것이고, 사용 방법은 '{ }' 으로 코드를 묶어 주기만 하면 됩니다. const logCitySkyline = () => { let skyscraper = 'Empire State Building'; return 'The stars over th..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:03

3. Functions 함수는 자바스크립트의 기본 구성 요소 중 하나로, 작업을 수행하거나 값을 계산하기 위해 사용됩니다. 함수는 하나 이상의 값을 전달할 수 있으며 실행이 끝날 때 값을 반환할 수 있습니다. 3-1. 함수 선언 함수를 사용하려면 함수를 호출할 곳에 함수를 정의해야 합니다. 함수를 생성하는 한 가지 방법은 함수 선언을 사용하는 것입니다. 함수 이름 또는 해당 식별자 뒤에 괄호가 오고, 함수의 중괄호 { } 안에 특정 작업을 수행하는 데 필요한 명령문 또는 본문을 담고 있습니다. Function HiWorld() { console.log('Hello, World!'); } 3-2. 함수 호출 함수 이름 뒤에 괄호를 사용하여 코드의 다른 곳에서 함수를 호출하거나 실행할 수 있습니다. 함수를 ..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:02

2. Conditionals 일상생활에서 우리는 상황에 따라 결정을 내립니다. 예를 들어, 피곤하면 잠을 자고 그렇지 않으면 일어나서 하루를 시작합니다. 이러한 if-else 결정은 조건문을 작성하여 코드로 모델링할 수 있습니다. 조건문은 특정 조건을 검사하고 조건에 따라 작업을 수행합니다. 2-1. if 문 if 옆 괄호 () 안에 참 또는 거짓으로 평가하는 조건이 제공됩니다. 해당 조건의 결과가 true이면 중괄호 {} 안의 코드가 실행되고 조건의 결과가 false이면 중괄호 안의 블록이 실행되지 않습니다. if (true) { console.log('Time to buy!'); } 2-2. if…else 문 if 문의 조건의 결과가 false일 때 else문의 코드가 실행됩니다. if (false)..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:01

1. Introduction 1-1. Introduction to JavaScript JavaScript는 웹 페이지에서 사용자로부터 특정 이벤트 혹은 입력값을 받아 동적 처리를 목적으로 개발된 객체 기반의 프로그래밍 언어입니다. JavaScript는 웹 개발의 핵심이기 때문에 이를 기반으로 웹 개발뿐만 아니라 더 많은 것을 개발할 수 있습니다. 지금부터 JavaScript 시작합니다! 1-1-1. Console (콘솔) console.log(5); Console은 개발자에게 오류 같은 중요한 메시지를 표시하는 패널입니다. console.log()를 쓰면 괄호 안에 넣은 내용이 콘솔에 출력됩니다. 1-1-2. Comments (주석) console.log(5); // Prints 5 /* This is ..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:00