이번 장에서는 컴포넌트에 대해 배워보겠습니다. 1장에서 컴포넌트는 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체라고 배웠습니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다. import React from ‘react‘; import ‘./App.css‘; function App() { const name = ‘리액트‘; return {name}; } export default App; 2장에서 보았던 App.js는 함수형 컴포넌트입니다. import React, { Component } ..

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

2.1 코드 이해하기 create-react-app으로 hello-react 프로젝트를 만들고 src/App.js 파일을 VS code에서 엽니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; import 구문은 특정 파일을 불러오는 것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용할 수 있습니다. 모듈을 불러와서 사용하는 것은 브라우저에는 없는 기능입니다. 이는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해..

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

혹시 웹페이지를 만들어본 경험이 있나요. 혹은 웹 페이지를 만들면서, 수많은 html 태그와 복잡한 항목을 코딩하기에 지쳐본 경험이 있나요. ​ 여기 이 복잡함에 염증을 느껴 그 해결책으로 React를 이용했고, 이를 계기로 '웹 개발' 영역에 터를 잡은 사람이 있습니다. 저자 김민준은 자신이 좋아하는 리액트를 더 많은 사람들이 쉽고 편하게 배우기를 바라면서 한 권의 책을 집필합니다. ​ ​ 리액트를 다루는 기술 - 교보문고 입문부터 대규모 애플리케이션까지 한 권으로 | 리액트 베스트셀러 1위리액트, 현장 밀착 입문서는 따로 있다!자바스크립트의 기본 기능과 문법을 숙지한다리액트의 기본기를 익히려면 자바스 www.kyobobook.co.kr ​ 책 [리액트를 다루는 기술]은 리액트를 처음 다루는 사람부터 ..

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

9-1-1. 객체 [객체 리터럴 생성] 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 키-값를 쌍으로 저장할 수 있는 구조이다. 괄호({ })를 사용하여 객체 리터럴을 지정한다. 키의 이름를 작성 하고 콜론과 값을 차례로 작성하여 키-값 쌍을 만든다. 객체 리터럴에서 키-값 쌍은 쉼표(,)로 구분한다. 프로퍼티는 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태이다. 특정 객체가 가지고 있는 정보를 품고 있어 그 객체가 가진 정보에 직접적으로 접근할 수 있게 한다. 9-1-2. 객체 [프로퍼티 접근 – 도트 연산자(.)] 두 가지 방법으로 객체의 속성..

22-23/22-23 리액트 스타터 1 2022. 9. 22. 12:35

8-1-1. 고차함수 [데이터로서의 기능] 자바스크립트에서 함수는 다른 데이터 유형처럼 작동한다. 다른 언어와 달리 함수가 일종의 값으로 취급된다는 뜻이다. var a = function() {} 위 코드를 보면 함수가 값으로 쓰였다는 것을 이해할 수 있다. 함수의 정의가 변수 a에 할당되었으며 함수가 값으로 쓰였다. 즉, 함수를 변수에 할당할 수 있고, 새로운 변수에 다시 할당할 수도 있다. 이를 활용하여 코드를 보다 간결하게 작성할 수 있다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 위 코드는 호출할 때마다 announceThatIAmDoingImportantWor..

22-23/22-23 리액트 스타터 1 2022. 9. 22. 12:34

Loops(루프,반복) 반복되는 프로그램을 만들 때, 매번 동일한 코드를 입력하는 것은 매우 번거로운 일입니다. 반복문을 사용하면 특정 조건이 충족될 때까지 반복하고, 조건이 충족된다면 반복을 멈추고 다음 코드로 이동합니다. 프로그램을 효율적으로 만드는 반복문을 배워봅시다. 위에서 본 예시를 for문을 사용한다면 간단하게 표현할 수 있습니다. for문의 괄호 안에는 세미콜론(;)으로 구분된 세 개의 식이 있습니다. 첫 번째 식인 초기식은 반복문을 시작하고, 반복되는 변수를 선언하는 데 사용됩니다. 두 번째 식인 중지 조건은 반복되는 변수가 참인지 거짓인지 판단하는 조건으로, 참으로 평가되면 반복문이 실행되고 거짓으로 평가되면 반복문이 종료됩니다. 세 번째 식인 변화식은 반복마다 반복되는 변수를 업데이트합..

22-23/22-23 리액트 스타터 1 2022. 9. 22. 12:33

Arrays(배열) 데이터를 구성하고 저장하는 것은 프로그래밍의 기본 개념입니다. 배열은 데이터의 목록을 만드는 자바스크립트의 방법입니다. 배열에 문자열, 숫자 및 부울을 포함한 모든 데이터 유형을 저장할 수 있습니다. 그리고 배열에 저장된 각 항목은 번호가 매겨진 위치를 할당받습니다. 배열은 항목들을 대괄호 ‘[]’로 묶어 만듭니다. 위에서 배열은 모든 데이터 유형을 저장할 수 있다고 배웠습니다. 이렇게 배열은 여러 데이터 유형을 함께 저장할 수 있습니다. 배열 내부의 각 항목을 요소라고 부릅니다. 그리고 배열을 변수에 저장할 수도 있습니다. 배열의 각 요소는 인덱스라는 번호가 매겨진 위치를 할당받습니다. 인덱스를 이용하여 각 요소에 접근할 수 있습니다. 이때 자바스크립트에서 배열은 0부터 시작한다는 ..

22-23/22-23 리액트 스타터 1 2022. 9. 22. 12:32

Scope(스코프, 변수 영역) 스코프는 프로그래밍에서 가장 중요한 개념 중 하나입니다. 스코프는 변수에 접근하거나 참조할 수 있는 위치를 정의합니다. 스코프에 따라 어떤 변수는 프로그램 내 어디에서나 접근할 수 있지만, 어떤 변수는 특정 블록에서만 접근할 수 있습니다. 우리는 함수와 if 문에서 블록을 본 적이 있습니다. 블록은 중괄호 ‘{}’로 감싸진 코드입니다. 블록은 하나 이상의 명령문을 그룹화하고, 코드에 중요한 구조적 표시 역할을 합니다. 변수는 블록의 외부 또는 내부에 존재할 수 있습니다. 전역 스코프에서는 변수가 블록의 외부에서 선언됩니다. 이렇게 선언된 변수를 전역 변수라고 합니다. 전역 변수는 블록 코드를 포함한 프로그램의 모든 코드에서 접근할 수 있습니다. 이 변수는 어디에서든 접근할..

22-23/22-23 리액트 스타터 1 2022. 9. 22. 12:31

핫해진 개발자에 대한 관심과 함께, 개발 언어를 학습할 방법 또한 다양해지고 있다. ​ ​ Codecademy는 프로그래밍의 이론과 실습을 균형 있게 학습할 수 있는 영문 온라인 플랫폼이다. 이 사이트에서는 PHP, Python2, Ruby 등 다양한 언어에 대한 학습 커리큘럼을 유/무료로 제공하고 있는데, 이 중에서 JavaScript 코스에 대해서 알아보자. ​ JavaScript 코스는 총 10개의 챕터로 구성되어 있다. ​ 그 중에서, 학습한 일부 단원의 개념에 대해서 알아보자. ​ ​ ​ ​ ​ ​ 2 : Introduction - JavaScript 프로그래밍 언어로, 주로 웹 개발을 위해 사용된다. 특징으로, 동적 작용 작동 가능, 강력함, 유연함, 현대에 많이 사용된다는 점이 있다. ​ -..

22-23/22-23 리액트 스타터 1 2022. 9. 22. 12:30