리액트 스터디 (멋쟁이 사자처럼)

김진권·2021년 11월 25일
리액트
0

리액트 스터디

목록 보기
1/1
post-thumbnail

1주차

✳️ 리액트를 사용하는 이유는 무엇일까?

사실 자바스크립트만 조금 공부해본지라 라이브러리, 프레임워크.. 이름만 들어봤지 무엇인지 잘 몰랐다.
간단하게 특정 언어를 기반으로 하는 쓸만한 도구정도로 알고 있었는데
조은님의 특강을 듣고 리액트는 꼭 배워둬야 겠다는 생각이 들었고 리액트에 노베이스인 상태로 멋사 리액트 스터디에 가입하게 됐다.

오늘 스터디 일정도 정하고 분량도 정했는데 열심히 해야겠다는 생각뿐이었지 왜 리액트를 배우고 써야하는지 리액트가 라이브러리인지? 프레임워크인지? 이걸 쓰면 어떤 이득이 있는지 등 정작 베이스로 깔고 가야할 것들을 생각해보지 않았다.

블로그들을 탐색해서 프레임워크의 사용 이유에 대해 알아보았는데

The choice of a front-end technology doesn’t depend on the features you want to provide to your user, but on the user experience you want him/her to have

  • ➡️ 기능에 초점을 맞추면 짧은 대답은 아니오 이고 사용자 경험(UX)에 초점을 맞추면 대답은 예 라는 것이다.

❓ 사용자 경험(UX)이란?

Products that provide great user experience (e.g., the iPhone) are thus designed with not only the product’s consumption or use in mind but also the entire process of acquiring, owning and even troubleshooting it.

제품의 소비 또는 사용뿐만 아니라 구매, 소유 및 문제 해결의 전체 프로세스를 염두에 두고 설계하는 방식?

도널드 노만이라는 분이 만든 디자인 개념이다.

  • 사용 가능한 제품을 만드는 데에만 집중하지 않는다.
    즐거움, 효율성 및 재미와 같은 사용자 경험의 다른 측면에도 집중한다.

  • 따라서 좋은 사용자 경험에 대한 단일 정의는 없고
    대신, 좋은 사용자 경험은 특정 사용자가 제품을 사용하는 특정 컨텍스트에서 특정 사용자의 요구를 충족시키는 것이다.

What is User Experience (UX) Design? | Interaction Design Foundation (IxDF)

😅 한번에 이해하기엔 꽤나 모호한 개념이다.. 이분이 내신 디자인 책이 많던데 조은님이 추천해주신 블로그에 있는 목록을 참고해서 한권 읽어봐야할듯


리액트 공식 홈페이지에 나온 리액트 소개 문구

A JavaScript library for building user interfaces

  • "React는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리"
  • React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

  • React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다.

  • 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

✔️ 사용자 입장에서 데이터가 변할 때 페이지 리로딩이 일어나지 않기 때문에 UX가 더욱 향상되는 UX적 이득이 있기 때문에 리액트를 사용하는 것.
➡️ 그래서 SPA(Single Page Application)라고 할 수 있는 것.
✔️ 개발자 입장에서도 컴포넌트 기반의 React를 사용할 경우 코드의 가독성과 재사용성 그리고 유지보수가 편하다.

위의 장점을 가진 비슷한 역할의 프레임워크들이 있음에도 리액트가 대세가 되었는데
그 이유는

  • Angular나 Vue에 비해 알아야 할 규칙이나 제약이 적다.
  • 페이스북에서 끊임없이 유지, 개발 중에 있다.
  • 새로 배울 기술이 많은 커뮤니티를 보유하고 있다.
  • ‼ React Native가 있다
    (모바일 앱으로 까지 확장)

제로초님 리액트 강좌 : 리액트 사용의 이유!

  • 사용자 인터페이스를 편하게 만들기 위해서.
  • React => SPA (Single Page Application) : 화면깜빡임 하나도 없고 자연스럽다. => 사용자 경험이 좋아진다. 앱같은 느낌 (UX가 좋아진다.)
  • 데이터 처리 쉽게 하려고 (데이터와 화면의 연동을 쉽게 하려고)
  • 컴포넌트화 시킬 수 있다. (조각 공장)

출처 : React
React를 사용하는 이유
Do We Really Need a Front-end Framework? | by Alexandre Lombard | The Startup | Medium

✳️ Install React

공식문서를 보고 그 순서 그대로 npx 명령어를 통해 설치했다.
npm start 명령어 입력시 페이지에 접근할 수 없는 에러가 있었고 에러 내용은 다음과 같았다.

Error: error:0308010C:digital envelope routines::unsupported
정확한 근거는 모르지만 위의 에러 내용을 스택오버플로우에 있는 답변을 통해 해결했음.

node.js - Error message "error:0308010C:digital envelope routines::unsupported" - Stack Overflow

✳️ JSX란?

✔️ JSX === JavaScript eXtension

JSX는 자바스크립트의 확장 문법이며 XML과 생김새가 유사하다.

  • (마치 HTML 문법을 JavaScript 코드 내부에 쓴 것 처럼 보인다.)
  • 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
function App() {
  return (
    <div>
      Hi! <strong>React!</strong>
    </div>
  )
}

➡️ 위의 코드는 바벨을 통해 아래와 같이 변환된다.

function App() {
  return React.createElement("div", null, "Hi!", React.createElement("strong", null "React!"));
}

➡️ 컴포넌트를 렌더링 할 때 마다 위와 같이 React.createElement 함수를 사용해야 하는 것은 힘들다. JSX를 사용하면 간편하게 UI를 렌더링 할 수 있다.

‼️ JSX는 자바스크립트 문법이 아니다.

  • JSX는 리액트로 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 과 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

‼️ JSX의 규칙들

  • 1️⃣ 속성은 쌍따옴표로 감싼다.
    (class를 주고 싶을 때, 원래 속성명은 class이지만 JSX에서는 className을 사용해야 함.)
const myVehicle = {
  type: <li>BMW 3 Series Sedan</li>,
  fuel: <li>Gasoline</li>,
  displacement: <li className="list-item">1995 ~ 2998cc</li>,
}

  • 2️⃣ 태그는 항상 닫혀있어야 함
    (HTML에서 <input> 이나 <br> 을 사용할 때 닫지 않는 경우가 있는데 React 에서는 반드시 클로징 태그를 사용해서 닫아줘야 함.)
import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <input type="text">
      </div>
    );
  }
}

export default App;

  • 3️⃣ 어떤 태그라도 Self-closing tag가 가능
<input> => <input />
<div></div> => <div />

  • 4️⃣ 형제 노드를 작성할 수 없다
    아래 예시와 같이 형제만으로 구성된 형태로 작성 할 수 없다.
    (반드시 부모가 감싸고 있는 형태여야 함.)
    ❓ 감싸줘야 하는 이유 : Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있음.
import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    );
  }
}

export default App;

➡️ 그래서 반드시 div나 Fragment로 감싸진 형태여야 한다.

import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </Fragment>
    );
  }
}

export default App;

  • 5️⃣ JSX 안에 자바스크립트 값은 다음과 같이 사용
    ✔️ JSX에서 표현식을 작성하는 방법 :
    (변수를 먼저 렌더 안에서 정의하고 리턴에서 변수명을 중괄호로 감싼 형태로 표현한다.)
import React, {Component, Fragment} from 'react';

class App extends Component {
  render() {
    const type = 'BMW 3 Series Sedan';
    const fuel = 'Gasoline';
    const displacement = '1995 ~ 2998cc';
    return (
      <Fragment>
        <div>{type}</div>
        <div>{fuel}</div>
        <div>{displacement}</div>
      </Fragment>
    );
  }
}

export default App;

  • 6️⃣ 조건부 연산자
    JSX 내부의 자바스트립트 표현식에서 if 문을 사용할 수는 없다.
    하지만 조건에 따라 다른 내용을 rendering 해야 할 때
    JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자 (삼항연산자)를 사용하면 된다.
import React from 'react';

function App() {
    const car = 'BMW 3 Series Sedan';
    return (
      <div>
      {car === 'BMW 3 Series Sedan' ? (<h1>This is my car</h1>) : (<h2>This isn't my car</h2>)}
      </div>
    );
}

export default App;

  • 7️⃣ && 연산자를 이용한 조건부 렌더링
    삼항연산자를 사용하여 조건에 따른 렌더링을 할 수도 있지만 AND 연산자(&&)를 사용하여 좀 더 간결하게 작성할 수도 있다.
import React from 'react';

function App() {
    const car = 'Benz G-Class';
    return (
      <div>
        {car === 'BMW 3 Series Sedan' && <h1>It's correct</h1>}
      </div>
    );
}

export default App;

➡️ 위 코드를 실행하면 브라우저에 아무것도 렌더링되지 않는다.
❓ &&연산자로 조건부 렌더링 할 수 있는 이유 :

  • react에서 false를 rendering 할 때는 null 과 마찬가지로 아무것도 나타나지 않기 때문.
  • 주의해야 할 점 : falsy 한 값인 0은 예외적으로 화면에 나타난다.
const num = 0;
return num && <div>content</div>

위의 예제는 화면에 content를 보여주는 것이 아니라 0을 보여줌.

  • 8️⃣ && undefined를 렌더링하지 않기
    react 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 ❌.
    다음 예시를 보자.
import React from 'react';
import './App.css';

//undefined를 렌더링 하지 않기
function App() {
  const car = 'undefined';
  return name;
}

export default App;

코드를 실행하면 다음과 같은 오류가 발생한다.
App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

어떤 값이 undefined 일 수도 있다면, OR( || )연산자를 사용하면 해당 값이 undefined 일 때 사용할 값을 지정할 수 있으므로 간단하게 오류 방지 가능하다.

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

function App() {
  const car = 'undefined';
  return name || '값이 undefined 이다.';
}

export default App;

JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

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

function App() {
  const car = 'undefined';
  return <div>{name}</div>;
}

export default App;

car값이 undefined일 때 보여 주고 싶은 문구가 있으면 다음과 같이 코드를 작성한다.

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

function App() {
  const car = 'undefined';
  return <div>{name || 'BMW'}</div>;
}

export default App;

위에 설명한 JSX의 규칙들은 아래 출처의 블로그들에 나와 있는 내용들이다.
이 외 JSX의 특성은 공식문서에 정리되어 있다.

출처 : [React 기초] JSX란? / JSX 문법
React | JSX란? 렌더링 Rendering이란?

클래스형과 함수형 차이
Babel이란 무엇인가? — 오웬의 개발 이야기

멋사 - 리액트스터디 - Google Sheets

profile
김진권
start!

2개의 댓글

comment-user-thumbnail
HyunHo Lee
2021년 11월 25일

파이팅이에요!!!

답글 달기
comment-user-thumbnail
Dana
2021년 11월 26일

리액트 스터디 우리 파이팅해봐요..! 전 자스도 모르는데 할 수 있을지..!

답글 달기