[React] 기초개념

개발용어

라이브러리(Library)

• 간략 설명: 프로그램 제작 시 필요한 기능
• 비교 설명: 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백

재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class 나 Function 으로 만들어졌다.

사용 여부는 개발자(코드 작성자)의 선택 사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않다. 제작 의도에 맞게 작성하면 된다.

라이브러리 예시

• 재사용하기 쉽게 버튼, 테이블 같은 구성 요소를 호출해서 쓸수 있도록 분리해둔 그래픽 사용자 인터페이스(Graphical user interface , GUI)
• 객체지향 프로그래밍(object-oriented programming, OOP)은 기본적으로 각 기능마다 함수화 하는 것으로 클래스 라이브러리라고 할 수 있다.

프레임워크(Framework)

• 간략 설명: 프로그램 기본 구조
• 비교 설명: 자동차 프레임

개발자들의 개발 생산성을 높이기 위해 일정한 프레임과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구다.

원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것으로 라이브러리가 포함되어 있다.

프레임워크만으로는 실행되지 않으며 기능 추가를 해야 되고 프레임워크에 의존하여 개발해야 되며 프레임워크가 정의한 규칙을 준수해야 한다.

프레임워크 예시

• Java : Spring
• Python : Django
• JavaScript : AngularJS
• PHP : Laravel

아키텍쳐(Architecture)

• 간략 설명: 프로그램 주요 구조 설계
• 비교 설명: 자동차 도면

기획한 내용을 프로그램화 했을 경우 필요한 주요 특징을 기술적으로 설계 하고 명시하는 것이다.

결과물에 필요한 모든 구성 요소를 명시하지만, 구체적인 구현 방법은 포함되어 있지 않다. 가령, 플랫폼은 주요 특징이지만 프레임워크와 라이브러리는 주요 특징이 아니므로 명시되지 않을 가능성이 큽니다.

자동차 설계로 예를 들면 자동차 헤드라이트가 본넷 밑에 사각형 모양으로 존재한다고 설계하고 헤드라이트 고정 방식이 접착제인지, 볼트인지는 명시되지 않는다고 볼 수 있다. 하지만 상황에 따라 포함될 수도 있다.

아키텍처 예시

• PC를 조립하기 위해 하드웨어 부분을 확인하고 선택한 리스트가 아키텍쳐라 할수 있다.
• Azure 솔루션 아키텍쳐

플랫폼(Platform)

• 간략 설명: 프로그램 실행 환경
• 비교 설명: 자동차 주행 환경(고속도로용, 사막 전용, 경주용)

프로그램이 실행되는 환경이며 플랫폼은 플랫폼위에 다른 플랫폼이 존재할 수 있다. 가령, Windows에서 Java로 개발하고 있으며 앱스토어에서 어플을 내려받는 과정에서 이미 3개의 플랫폼을 사용하고 있는 것이다.

플랫폼은 같은 영역에도 다양한 목적과 가치로 많이 만들어지고 있으며 모든 플랫폼에서 실행되도록 개발하기는 어렵다. 프로그램의 목적에 맞도록 플랫폼을 선택하는 것이 중요하다.

플랫폼 예시

• Windows, Linux, macOS 등 O/S는 모두 플랫폼이다.
• 앱을 다운받는 앱스토어, 구글플레이스토어 등도 플랫폼이다.
• V8 JavaScript Engine은 JavaScript에게 큰 힘이 되어주고 있는 플랫폼이다.
• Java 프로그램은 OS제약이 없지만 실행하기 위해서는 해당 OS에 자바 가상 머신(Java Virtual Machine, JVM)위에서 실행되므로 Java 플랫폼이 필요하다.

---

MVC Pattern

MVC Pattern은 Model View Controller Pattern의 줄임말이다.

Model(모델)

컨트롤러가 호출할 때 요청에 맞는 역할을 수행한다. 역할에 필요한 데이터처리를 수행하는 응용프로그램의 일부라고 할 수 있다. DB에 연결하고 데이터를 추출하거나 저장,삭제,업데이트,변환 등의 작업을 수행한다. 상태의 변화가 있을 때 컨트롤러와 뷰에 통보해 후속 조치 명령을 받을 수 있게한다.

View(뷰)

컨트롤러로부터 받은 모델의 결과값을 가지고 사용자에게 출력할 화면을 만든다. 만들어진 화면을 웹브라우저에 전송하여 웹브라우저가 출력하게 하는 것이다. 화면에 표시되는 부분으로 추출한 데이터나 일반적인 텍스트 데이터를 표시하거나 입력폼 또는 사용자와의 상호작용을 위한 인터페이스를 표시하는 영역이다.

Controller(컨트롤러)

클라이언트의 요청을 받았을때, 그 요청에 대해 실제 업무를 수행하는 모델 컴포넌트를 호출한다. 또한 클라이언트가 보낸 데이터가 있다면, 모델에 전달하기 쉽게 데이터를 가공한다. 모델이 업무를 마치면 그 결과를 뷰에게 전달한다.

라이브러리/프레임워크 동작 방식

프레임워크(Framework)	라이브러리(Library)
View => Controller => Model => Controller =>View	View

React는 라이브러리다.

---

React의 핵심요소

JSX Syntax

jsx문법은 자바스크립트 안에서 html문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이다.

일반적으로 태그 내에 클래스 와 스타일 을 넣을 때 일반 HTML과는 조금 다르다.

HTML에서의 클래스와 스타일 작성법

<!-- 클래스 -->
<div class="test"></div>
<!-- 스타일 -->
<div style="display:block;"></div>

React(jsx)에서의 클래스와 스타일 작성법

<!-- 클래스 -->
<div className="test"></div>
<!-- 스타일 -->
<div style={{display:block;}}></div>

클래스의 경우 JavaScript의 class문법이 따로 있기 때문에 위와 같이 클래스는 class가 아닌 className으로 작성해야하고, 스타일은 중괄호 두개 로 묶어 작성해야한다.

스타일 작성 시 background-size / font-size 등 중간에 - 기호가 붙은 프로퍼티들은 - 가 산술연산자 로 받아들여 프로퍼티에 오류가 발생한다.

이 때, backgroundSize / fontSize 처럼 뒷 단어를 - 없이 붙이고 첫 글자를 대문자로 바꾸는 카멜기법을 사용한다.

그리고 jsx는 같은 태그를 병렬 기입 할 수 없다.

<div></div> // 이미 생성됨
<div></div> // 병렬 기입 불가능

이럴 때에는 두개의 태그를 다시 한 번 <div> 태그로 묶어줘야 하는데 이럴때 div보다는 <> </> 와 같이 의미없는 태그로 감싸면 된다.

컴포넌트(Component) 기반

길고 복잡한 html코드들을 자주 사용해야 할 경우 컴포넌트에 축약해서 만들어 놓고 필요 시에 불러와 적용하는 방법

컴포넌트 생성(함수형 기준)

컴포넌트의 이름을 가진 함수를 생성한다. (함수명은 컴포넌트라는 것을 알기위해 첫 글자를 대문자 로 시작한다.)

function Modal(){
  return()
}

함수 내 return값 에 코드를 작성한다.

function Modal() {
  return (
    <div className='modal'>
      <h4>SubTitle</h4>
      <p>Date</p>
      <p>Info</p>
    </div>
);

컴포넌트 생성 시 const로 화살표함수 생성해서 컴포넌트를 만들면 상수를 변경하지 못하는 특징때문에 컴포넌트의 변경을 막을 수 있다는 장점이 있다.

컴포넌트 사용

사용하고자 하는 위치에서 함수명의 태그를 불러와 사용한다.

// 기본 사용법
<Modal></Modal>
// 축약 사용법
</Modal>

---

함수형 & 클래스형 컴포넌트

선언 방식

함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

클래스형 컴포넌트의 핵심

• class 키워드 필요
• Component로 상속을 받아야 함
• render() 메소드를 반드시 필요로 함

일반적인 차이점

함수형	클래스형
state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]	state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.	메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
컴포넌트 선언이 편하다.	임의 메소드를 정의할 수 있다.

함수형이 클래스보다 후에 나왔기 때문에 더 편한 것은 사실이다.

그러나 과거에 제작된 프로젝트는 클래스형 컴포넌트를 사용한 경우가 있다. 유지보수를 위해서 알아둘 필요가 있다.

---

React의 데이터 전송 방식

방식	특징
props	컴포넌트외부에서 컴포넌트로 전달하는 단방향 데이터(수정 불가)
state	컴포넌트 내부에서 변경할 수 있는 데이터
context	다양한 컴포넌트에 전역적인 데이터를 전달하기 위해 사용하는 도구(상태관리X)
redux	애플리케이션 전체의 상태 중앙 저장소 역할을 하며 애플리케이션의 상태를 예측 가능한 방식으로 업데이트 하기 위해서 사용하는 라이브러리

props

컴포넌트외부(상위)에서 컴포넌트(하위)로 전달하는 단방향 데이터

상위 컴포넌트 에서 데이터를 불러와 하위 컴포넌트로 단방향으로 읽기전용 데이터를 전송할 수 있다.

/* 상위 컴포넌트 */
import cakes from './cakes.json'; /* json 파일 불러오기 */

function App() {
  return (
    <>
      <div>App</div>
      {cakes.map((cake) => (
        /* 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송할때 props를 사용 */
        /* propsName = {데이터 값} propsd의 이름 자유롭게 작명 가능 */
        <Macaron propsid={cake.id} propsname={cake.name} propsimage={cake.image} />
        /* 불러온 json파일에서 객체의 키값들을 props로 데이터 전송 준비 */
      ))}
    </>
  );
}

일반적인 방법

/* 자식 컴포넌트 */
/* props를 통해 단방향으로 데이터를 전달받아 할당이 필요한 곳에 props와 키를 직접 넣는 법 */
function Macaron(props) {
  return (
    <div>
      <h1>Macaron No.{props.propsid}</h1>
      <h2>{props.propsname}</h2>
      <img src={props.propsimage} alt={props.propsname} />
    </div>
  );
}

구조분해할당법 1

/* 자식 컴포넌트 */
/* props라는 객체를 각각의 키값으로 분해 해서 변수로 할당하는 법 */
function Macaron(props) {
  const { propsid, propsname, propsimage } = props;
  return (
    <div>
      <h1>Macaron No.{propsid}</h1>
      <h2>{propsname}</h2>
      <img src={propsimage} alt={propsname} />
    </div>
  );
}

구조분해할당법 2 (사용 권장)

/* 자식 컴포넌트 */
/* 처음부터 데이터를 받을 때부터 객체가 분해된 상태로 불러오는 법 */
function Macaron({ propsid, propsname, propsimage }) {
  return (
    <div>
      <h1>Macaron No.{propsid}</h1>
      <h2>{propsname}</h2>
      <img src={propsimage} alt={propsname} />
    </div>
  );
}