React의 등장

1. Web Application의 발전

• React는 어떤 문제를 해결하기 위해 만들어진 기술인가?

  ➡️ 과거에는 단순했던 Web Application이 점점 동적이고 유저와의 상호작용이 많아지면서 다루어야할 data와 code가 증가하였다. 이 상황에서 DOM으로 접근해서 조작했던 방법으로는 개발 그리고 유지,보수가 어려워지게 되었다. 이런 상황으로 인해 React와 같은 다양한 Framework와 Library가 등장하게 되었다.

• Web Application 이란?

  ➡️ 사용자가 별도로 응용 소프트웨어(Application)을 설치하지 않아도 웹 브라우저를 통해 기능을 이용할 수 있는 웹 서비스이다. ex) 문서작성, 쇼핑, SNS, 게임 in Web browser.

2. Framework와 Library

🔹 공통점

Framework와 Library는 복잡하고 고도화된 개발을 효율적으로 그리고 편리하게 하기 위해 개발자들이 만들어 둔 코드이다.

🔸 차이점

➡️ Framework : 다른 사람이 만들어 둔 코드의 정해진 틀(Frame) 속에서 수동적으로 작업(work)해야한다.(e.g.)Angular, Vue)

➡️ Library : 개발자가 필요한 기능이 있으면 찾고(Library) 능동적으로 가져와 사용 가능하다.(React -> framework 적인 특징 일부를 갖고있긴 함)

❓ React가 가지고 있는 framework 적인 특징은 무엇인가?

3. React를 사용하는 이유

➡️ React는 대부분 JavaScript문법을 그대로 활용함. 그러므로 접근성이 좋다.\ ➡️ Facebook의 지속적인 관리와 함께 eco-system이 활성화되어있어 user가 많고 community가 발달해 있다.\ ➡️ React 기반의 React Native라는 기술을 통해 웹 as well as IOS, Android 기반 mobile application도 개발 가능

React의 정의 & 특징

1. React의 정의

➡️ React는 Facebook에서 개발하고 관리하는 UI를 만들기 위한 JavaScript Library이다. ➡️ React를 사용하는 가장 큰 이유 : UI 자동 update 해줌

• 자동업데이트로 인해 아래와 같은 이점이 있음:
• data기반의 선언적 개발 가능
• 자동으로 UI를 업데이트 하는 과정에서 virtual DOM을 통해 최적화된 업데이트 가능
• Component기반의 개발을 통해 복잡한 UI를 효과적으로 구성가능
• JSX문법으로 Component 편리하게 작성 가능

❓ 여기서 말하는 virtual DOM(가상 돔) 이란 react JSX에서 쓰는 html 을 말하는 건가?

2. React의 특징

🔹 선언적

개발은 절차적(명령적) How to solve? / 선언적 방식 What to solve? 으로 나뉘어짐

예시 :

🚖 절차적 : 이 방향으로 직진해서 두 번째 블록에서 우회전해주시고, 이후 첫 번째 신호등에서 좌회전해주세요. 전방에 다리를 건널 때까지 직진해주시고, 소방서가 있는 블록에서 우회전 후 300m 앞에서 내려주세요. (How to solve?)

🚖 선언적 : OOO으로 가주세요. (What to solve?)

➡️ JavaScript : 절차적 ➡️ React : 선언적 -> React가 절차적인 방식을 알아서 처리해줌.

🔹 Virtual DOM (가상 돔)

React에서 UI를 update 할 때, virtual DOM을 이용해 실제 DOM에 일어나는 변화를 계산함.\ Why??\ 화면이 변할 때 마다 매번 DOM - layout계산 - paint 을 수백, 수천개의 요소에 하게되면 성능 저하, 프로세스 비 효율적이됨.

➡️ 이 문제를 해결하기 위해 virtual DOM을 통해 변경될 UI 최소 집합을 계산하여 DOM처리 최소화하고 효율적으로 진행(변하는 부분만 update 시킴)

🔹 Component

What is Component?\ ➡️ 재활용 가능한 UI 구성단위 (다른 기능의 구성단위를 모아 새로운것을 create할 수 있음)

특징?\ ➡️ 필요한 곳에서 재사용 가능\ ➡️ 독립적 사용이 가능해 코드의 유지보수에 좋음\ ➡️ 다른 component포함 가능 (parent - child)\ ➡️ 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋음

종류?\ ➡️ Class Component

   // App.js

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>This is Class Component!</h1>;
  }
}

export default App;

✔️ class component에서는 위와 같이 반드시 render() method가 있어야함\ ✔️ 그 안에서 화면에 보여줄 JSX(JavaScript Syntax eXtension) 반환\ ✔️ state & lifecycle API를 통해 관련기능 사용가능

➡️ Function Component

   // App.js

import React from 'react';

const App = () => {
  return <h1>This is Function Component!</h1>;
};

export default App;

✔️ render() method없이 JSX을 반환하는 방식\ ✔️ 장점 : class보다 단순하고 간단함 / 단점 : state, lifecycle 관리 못함\ ✔️ Hook기능 추가로 위의 단점 cover! -> state 사용이 가능해 지자 많이 사용되기 시작.

How to use?\ ➡️ 첫글자는 무조건 대문자 (e.i))\ ➡️ 선언된 component는 다른곳에 import하여 사용가능

🔹 JSX

JSX의 정의\ ➡️ JSX(JavaScript Syntax eXtension)이란 react에서 사용하는 javascript확장 문법\ ➡️ JSX로 작성한 코드는 브라우저에서 동작하기 전에 Babel에서 transcomplier를 통해 vanilla JavaScript코드 형태로 변환해줌

• 위의 사진과 같이 변환됨 /(위) jsx로 작성한 코드 /(아래) babel로 변환된 JSX코드

JSX의 특징\ ➡️ HTML과 유사한 형태로 보기 쉽고 익숙함 ➡️ 하나의 Javascript file에서 HTML 마크업과 자바스크립트 로직을 동시에 작성 가능해 편리함

JSX 문법

1. JSX element

   JSX문법을 통해 JavaScript파일 어디에서나 필요한 곳에 HTML처럼 작성 가능

   const hi = <p>Hi</p>;
   

2. Javascript 표현식

   JSX 내부에서 JavaScript값을 출력하고 싶으면 {...JavaScript...} 로 표현가능

// Greetings.js
import React from 'react';

const Greetings = () => {
  const name = '김개발';

  return <h1>{name}님, Welcome to Wecode!</h1>;
};

export default Greetings;

1. JSX attribute

   attribute name(속성명)은 camelCase로 작성해야함 class를 주고싶을 때, 원래 attribute name은 class지만 JSX에서는 className을 사용해야함

// HTML
<h1 class="greetings">Welcome to Wecode!</h1>

// JSX
<h1 className="greetings">Welcome to Wecode!</h1>

1. Event 처리하기

   vanilla JS에서는 DOM element에 Event Listener를 부착하는 방식으로 event를 처리했지만, JSX에서는 tag작성시 직접 Event 와 Event Handler를 부여할 수 있음

• 이벤트는 앞에 on을 붙여 camelCase로 작성
• 문자열이 아닌 함수로 이벤트 핸들러를 전달 ❓

// JS
const title = document.getElementsByClassName("title")[0];
title.addEventListener("click", handleClick);

// JSX
<h1 className="title" onClick={handleClick}>
  Welcome to Wecode!
</h1>

1. Inline Styling

   Style속성은 HTML에서 문자열로 받는 것과 달리 camelCase를 요소로 가지는 JavaScript를 객체로 받음

   그러므로 {{style attirbute}} <- 이렇게 써야함

2. 바깥의 { } 는 JSX 문법
3. 안쪽의 { } 는 JavaScript object를 의미

// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

(style 속성을 사용하는 inline styling은 css보다 성능이 낮고❓ 우선순위가 높기 때문에, 동적으로 계산하여 스타일링하는 경우 이외에는 사용을 지양하는 것이 좋다.)

1. Self-Closing Tag

// Bad
const Greetings = () => {
  return (
    <h1>김개발님!</h1>
    <h2>위코드에 오신 걸 환영합니다!</h2>
  );
}

// Good
const Greetings = () => {
  return (
    <div>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </div>
  );
}

const Greetings = () => {
  return (
    <React.Fragment>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </React.Fragment>
  );
};

const Greetings = () => {
  return (
    <>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </>
  );
};