학습 내용

React

자바스크립트 라이브러리이다.
UI(user interface)를 만들기 위해 사용한다.
SPA(single page application), mobile application 개발에 사용될 수 있다.

간단한 역사 수업 내용
과거와 달리 프론트엔드 개발이 점점 고유한 개발의 영역이 되어왔다.
프레임 워크가 탄생했다(생각의 틀 // 개발의 틀).
웹 프로그래밍을 하기 위해 다양한 도구가 생기고 있다.
1세대: html, css, javascript
2세대: JQUERY
3세대: 3개의 라이브러리가 있는데, 그 중 하나가 react이다.

리액트를 배우는 이유(개인적인 의견)
프로그래밍 언어는 계속 발전한다.
하드웨어 제품의 life cycle이 있는 것처럼,
소프트웨어 제품도 life cycle이 있다.

개발자들이 개발하기에 유용하다고 생각하는 소프트웨어 제품이 기존 제품을 제치고 시장에서 살아남았다.
회사에서 개발자들은 함께 개발하기 때문에, 같은 제품을 사용한다. 따라서 함께 개발하려면 대중이 사용하는(시장에서 살아남은) 소프트웨어 제품을 학습하는 것이다.

React 개요

프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리이다.

React 특징

선언형(Declarative)

HTML/CSS/JS 로 나눠서 작업하는게 아니라, 하나의 파일에서 JSX를 활용한 선언형 프로그래밍을 지향한다.

컴포넌트 기반

여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트는 독립적으로 작동하고, 재사용이 가능하다.
=> 기능에 집중해서 개발, 유지보수, 유지 테스트가 편리하다.
컴포넌트는 코드가 의존적이지 않기 때문에 가능한 것이다.

범용성

Javascript 프로젝트 어디에서든 이용 가능하다.
react native로 모바일 앱 개발도 가능하다.

React를 통해 페이지가 렌더링 되는 과정

렌더링: HTML, CSS, Javascript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.
이 부분은 매우 길어지니, 더 자세한 정보를 찾아서 다른 글에 정리해보자.

컴포넌트

컴포넌트는 하나의 기능을 구현하기 위한 여러 코드의 묶음이다.
하나의 application에 여러 개의 컴포넌트가 담긴다고 생각하자.

모든 리액트 앱은 최소 한개의 컴포넌트를 가지며, 트리 구조로 형상화 할 수 있다.
최상위 부모 노드는 Root이다.
컴포넌트는 각자 고유의 기능을 가지고 있으며, UI의 한 부분을 맡고 있다.
즉, 컴포넌트는 독립적으로 존재하며, 재사용이 유용하기 때문이다.

컴포넌트 비유(주관적인 나의 생각)

컴포넌트로 이루어진 앱은
장기로 이루어진 인간의 신체와 유사하다는 느낌을 받았다.

신체의 장기는 각자의 독립적인 기능을 갖고 있으며,
서로 유기적으로 연결되어, 건강한 신체를 유지하기 위해 활동한다.
인간의 장기는 의료 기술로 이식이 가능해서 재사용 될 수 있다.

컴포넌트도 독립적인 기능을 갖고 있고, 서로 유기적으로 연결되고, 재사용된다.

(나는 비유하면서 지식을 연결하기 때문에, 이 내용이 불현듯 떠올랐다)

JSX

JSX 개요

JavaScript XML의 약자로, JavaScript를 확장한 문법이다.
JSX는 브라우저가 바로 실행할 수 있는 JavaScript가 아니다.

Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링 할 수 있다.
JSX 없이도 React 요소를 만들 수 있으나, 코드가 복잡해져 가독성이 떨어진다.

문법(오늘 학습)

중괄호(js), 태그(html)

const myName = 'Dongwoo';
const element = <h1>Hello, {name}</h1>;

중괄호 안에 자바스크립트 표현식을 작성할 수 있다.
표현식은 값으로 평가될 수 있는 문이다.

HTML 태그와 중괄호 표현식을 같이 사용할 수 있다.
Hello는 일반 텍스트로 인식되며, 기존 HTML 코드에서의 일반 텍스트처럼 화면에 출력된다.

attribute에 표현식을 삽입할 때, 중괄호 주변에 따옴표를 입력하지 않는다.
동일한 attribut에 따옴표(문자열 값), 중괄호(표현식) 중 하나만 사용해야 한다.

camelCase

JSX는 HTML보다 JavaScript에 더 가깝다.
ReactDOM은 camelCase 프로퍼티 네이밍 규칙을 사용한다.
그래서 JSX에서 class -> className이 되는 것이다.

open and close

JSX에서 여러 element를 작성하고자 하는 경우,
처음과 끝에 opening tag, closing tag로 감싸줘야 한다.

Pascalcase

사용자 정의 컴포넌트는 대문자로 시작한다.

function Greeting() {
return <Hello />
}

조건부 렌더링

삼항연산자를 사용해야 한다. if문이 아니라.
이유: 중괄호 안에는 JSX 표현식이 들어가야 하는데,
표현식은 값으로 표현될 수 있는 문이기 때문이다.
조건식은 값으로 표현되지 못한다.

<div>
{/* JSX 표현식이 들어가야 한다*/}
</div>

map

여러 개의 HTML element를 표시할 때, map() 함수를 이용한다.
그리고 ma() 함수를 사용할 때는, 반드시 "key" JSX 속성을 넣어야 한다.

const users = [
{id: 1, name: 'dongwoo', age:28}
{id: 2, name: 'mazino', age: 17}
]

function User() {
const userInformation = users.map((user) => 
  <div key = {user.id}> // key를 사용해야 한다. 데이터베이스의 primary key를 떠올리자.
    <p>{user.name}</p>
    <p>{user.age}</p>
  </div>
  );
  
  return (
  <div>
    {userInformation}
  </div>
  );
}

map을 왜 사용하는가

쇼핑몰이 개업했다고 상상해보자.
쇼핑몰의 상품 수가 1, 2개 일 때는 상품이 추가될 때마다, 모든 상품을 div를 만들어서 페이지에 렌더링 할 수 있겠다. 하지만 상품 수가 100개, 1000개 그 이상이 되면 div를 100개, 1000개를 만들어서 코드를 작성하기에 시간이 없다. 한 번에 그 작업을 끝낼 수 있는 방법이 map() 메서드 이다.

map은 배열의 각 요소를 특정 함수에 의해 다른 요소로 매핑한다.

const products = [
  { id: 1, productName: "New jeans", category: "Jeans" },
  { id: 2, productName: "New sweater", category: "Sweater" },
];

function Uploadproduct() {
  return (
    <div>
      <div>
        <h2>{posts[0].productName}</h2>
        <span>{posts[0].content}</span>
      </div>
      <div>
        <h2>{posts[1].productName}</h2>
        <span>{posts[1].content}</span>
      </div>
    </div>
  );
}

function Uploadproduct() {
  const productInfo = products.map((product) =>
    <div key = {product.id}>
      <h2>{product[0].productName}</h2>
      <span>{product[0].category}</span>
      </div>
      );
      
      return (
      <div>
        {productInfo}
      </div>
      );
}

create-react-app

리액트 개발환경 구축

추가 작성 필요

종합퀴즈

컴포넌트 key

Warning : Each child in a list should have a unique "key" prop.
list의 각각의 자식 요소는 key 속성이 필요하다.
이를 해결할 수 있는 방법
1. 데이터의 id를 key로 사용한다.
2. 변하지 않고, 예상 가능하며, 유일한 id가 없으면 항목의 인덱스를 Key로 사용한다.

-> 데이터베이스의 Primary key와 매우 유사하다.
데이터베이스에 대한 기억
대리키가 있으면 대리키를 사용한다.
primary key가 없으면, 두 개의 key를 합친 데이터를 primary key로 사용한다.
index를 사용한다.

create react app

SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.

모르는 것

1. JSX 문법
2. 렌더링, react 페이지 렌더링 과정

추가 학습

1. 과제 코드 다시 작성
2. react 공식 홈페이지에서 React, JSX 학습
3. 모던 자바스크립트 660p 에서 렌더링 학습