3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수 컴포넌트와 클래스형 컴포넌트가 있습니다. 2장에서 보았던 코드는 함수 컴포넌트로, 다음과 같은 구조로 이루어져 있습니다. import './App.css'; function App() { const name = 'react'; return {name}; } export default App; 함수 컴포넌트는 클래스형 컴포넌트보다 선언하기 훨씬 편하다는 장점이 있습니다. 다음은 클래스형 컴포넌트의 구조를 보겠습니다. import React, { Component } from 'react'; class App extends Component{ render() { const name = 'react'; return {name}; } } ex..

22-23/22-23 리액트 스타터 3 2022. 10. 6. 10:00

2.1코드 이해하기 2.1.0 import React from 'react'; import 구문은 특정 파일을 불러오는 구문입니다. import를 통해 다른 파일을 불러오고 모듈도 불러와서 사용할 수 있습니다. import React from 'react'; 위의 코드는 React라는 모듈을 react라는 패키지에서 불러온다는 뜻입니다. 2.1.1 번들러와 로더 원래 브라우저에서는 import를 통해 모듈을 불러올 수 없습니다. 이런 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용합니다. 번들러는 묶는다는 뜻으로 import를 통해 불러온 모듈을 모두 합쳐 하나의 파일로 만들어 줍니다. 또한 최적화를 통해 여러 개의 파일로의 분리도 가능합니다. 리액트에서는 주로 웹팩이라는 번들러를 사용합니다. im..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:01

1.1 왜 리액트인가? 최근 몇 년간 많은 개발자들은 자바스크립트에 뜨겁게 열광하고 있습니다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 지금은 애플리케이션에서 가장 핵심적인 역할을 합니다. 우리는 그중에서 자바스크립트 라이브러리를 사용하여 사용자 인터페이스를 만들고, 최대한 성능을 아끼며 편안한 사용자 경험을 제공하는 리액트에 대해서 알아보고자 합니다. 1.1.0 MVMM과 MVC MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)는 프레임 워크의 아키텍쳐(구조) 입니다. 이 두 가지 구조의 공통점은 모델과(Model) 뷰(View)가 있다는 것입니다. 여기서 모델은 애플리케이션의 데이터를 관..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:00

Introduction JavaScript의 7개 데이터 유형으로 문자열, 숫자, 부울, null, 정의되지 않음, 기호, 객체가 있습니다. 일곱 번째 유형인 객체를 사용하여 코드를 보다 복잡한 가능성에 개방합니다. 객체 객체 리터럴 생성 객체를 변수에 할당할 수 있습니다. 중괄호를 사용하여 객체 리터럴{}을 지정합니다. let spaceship = {}; 정렬되지 않은 데이터로 객체를 채우고 데이터는 '키-값'으로 구성됩니다. 키는 값은 보유하는 메모리의 위치를 가리키는 변수 이름과 같습니다. 키의 이름 또는 식별자를 작성 하고 콜론과 값을 차례로 작성하여 키-값 쌍을 만듭니다 . 속성 액세스 객체의 속성에 접근하는 방법은 2가지입니다. (1) 점 표기법 객체의 이름을 쓰고 그 다음에 점..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:07

[8-A. HIGHER-ORDER FUNCTIONS] higher-order-function (고차함수) 는 함수를 매개변수로 받아들이거나 함수를 반환하는 함수입니다. 8-A-1. Function as Data 자바스크립트에서 함수는 모든 데이터 유형처럼 작동할 수 있습니다. 우리는 변수에 함수를 할당하는 것이 가능하고 그것을 새로운 변수에 다시 할당하는 것도 가능합니다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 위의 코드는 너무 긴 함수 이름을 가져서 코드의 가독성을 해칩니다. 위의 함수를 반복해서 호출한다고 가정해봅시다. 긴 이름을 계속해서 사용한다면 상당히 힘들 ..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:06

7. Loops 반복문은 특정 조건이 충족될 때까지 똑같은 명령을 반복하는데 사용되는 구문입니다. 7-1. 반복문 반복문은 특정 조건이 충족될 때까지 똑같은 명령을 반복하는 데 사용되는 구문입니다. 반복문을 사용하면 프로그램을 자동화하여 확장 가능하고 관리 가능한 프로그램을 만드는 효율적인 코드를 만들 수 있습니다. 7-2. for 반복문 전형적인 for 반복문은 반복 변수를 포함합니다. 반복 변수는 초기화되고, 종료 조건에 의해 검사되고, 반복될 때마다 새로운 값이 할당됩니다. 반복 변수는 어떤 이름을 사용해도 상관이 없지만, 뜻을 가지는 이름을 사용하는 것이 좋습니다. 일반적으로 index를 축약해 i를 사용합니다. for 반복문은 괄호 안에 ;(세미콜론)으로 구분된 세 가지 표현식을 포함합니다. 초..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:05

데이터를 구성하고 저장하는 것은 프로그래밍의 기본 개념입니다. 실생활에서 데이터를 구성하는 한 가지 방법은 목록을 만드는 것인데, 배열은 JavaScript의 목록을 만드는 방법입니다. 배열은 문자열, 숫자, 부울을 포함한 모든 데이터 유형을 저장할 수 있으며, 목록과 마찬가지로 배열은 순서가 지정됩니다. 즉, 각 항목에는 번호가 매겨진 위치가 있습니다. 1. 배열 생성 배열을 생성할 수 있는 한 가지 방법은 배열 리터럴을 사용하는 것입니다. 배열 리터럴은 항목을 [대괄호]로 묶어 배열을 만듭니다. 앞서 말한 것처럼 배열은 모든 데이터 유형을 저장할 수 있으며, 같은 데이터 유형을 모두 보유한 배열 또는 다른 데이터 유형을 보유한 배열을 생성할 수 있습니다. 배열 예제의 구문을 자세히 살펴보겠습니다. 배..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:04

스코프(범위)는 프로그래밍에서 중요한 개념으로, 변수가 선언되는 구역입니다. 전역 변수는 프로그램 내 어디에서나 접근 가능하지만 지역 변수는 특정 구역에서만 사용할 수 있습니다. 1. 블록 및 스코프 (Blocks and Scope) 스코프에 대해 이야기하기 전에 먼저 블록에 대해 이야기를 하자면, 블록은 {중괄호} 안에 있는 코드를 말합니다. 다음 예시는 if 명령문에서 사용된 블록입니다. 이처럼 블록은 하나 이상의 명령문을 함께 그룹화하는 데 도움이 되며 코드의 구조를 표시하는 데 중요한 역할을 합니다. 2. 전역 스코프 (Global Scope) 변수는 블록 외부 또는 내부에 존재할 수 있기 때문에 블록과 관련하여 스코프를 생각합니다. 전역 스코프에서 변수는 블록 외부에서 선언되며, 이러한 변수를 ..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:03

4. Functions 함수는 자바스크립트의 기본 구성 요소 중 하나로, 특정한 작업을 수행하기 위해 일련의 명령문을 그룹화한 재사용이 가능한 코드 블록입니다. 4-1. 함수 선언 함수를 사용하기 위해선 함수를 선언해야 합니다. 함수 선언식은 function 키워드, 함수의 이름 또는 식별자, 중괄호로 둘러싸인 함수의 내용으로 구성되어 있습니다. 4-2. 함수 호출 함수는 함수를 선언하는 것만으로는 동작하지 않습니다. 함수 이름 뒤에 괄호를 사용하여 다른 곳에서 함수를 호출하거나 실행할 수 있습니다. 함수를 호출하면 함수 내부의 모든 코드가 실행됩니다. 함수 호출은 필요한 만큼 얼마든지 반복할 수 있습니다. function sayThanks() { console.log('Thank you!'); } //..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:02

[CONDITIONALS] 우리는 일상생활에서 다양한 상황에 따라 어떻게 행동할지 결정을 내립니다. 예를 들어 아침에 일어나서 피곤하다면 우리는 다시 잠에 드는 선택을 할 것이고, 피곤하지 않다면 하루를 시작할 것입니다. 이번 장에서는 조건문을 통해 이러한 상황들을 코드로 만들어 봅시다. 3-1. If Statement 우리는 종종 조건에 따라 작업을 수행합니다. 프로그래밍에서는 If문을 사용하여 조건에 따라 작업을 수행할 수 있습니다. if (true) { console.log('This message will print!'); } // Prints: This message will print! 위의 예시를 통해서 If문의 구성 요소를 알아봅시다. If 키워드는 () 뒤에 코드블럭인 { }로 구성됩니다..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:01

Variables (변수)는 값의 컨테이너입니다. 또한 설명적인 이름으로 데이터에 레이블을 지정하면서 이해도 높입니다. 변수 수행 작업은 다음과 같습니다. 1. 설명이 포함된 이름으로 변수를 만들기 2. 변수에 저장된 정보를 저장 또는 업데이트 3. 변수에 저장된 참조 또는 ‘가져오기’ 정보 변수 생성은 3가지로 var, let, const가 있습니다. ES6 도입 전에는 var만 사용이 가능했지만 도입 후 const, let 사용을 가능하게 했습니다. 1. var은 새 변수를 생성하거나 선언하는 javascript 키워드입니다. 2. let (1) 변수에 다른 값을 다시 할당할 수 있습니다. (2) 변수에 값을 할당하지 않고 변수를 선언할 수 있으며 undefined로 자동 초기화 됩니다. 3. con..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:00