TIL 221013 모듈 / react 깔짝여보기

오늘 공부한 것

• 모듈
• 리액트가 필요한 이유
• JSX 간단하게

공부한 것 정리

react가 필요한 이유

reason 1

HTML에서 중복코드들의 변경사항 때문에 모든 페이지를 수정해야 되는 상황을 산탄총 수술(shotgun surgery)라고 한다.(ex. 헤더의 글자 하나를 바꿔야 되는 상황인데, 하나를 바꾸려면 모든 페이지를 수정해야 될 때)
이런 상황을 해결하려면 컴포넌트 방식으로 파일을 만들어야 된다.

나 컴포넌트 방식에 대한 건 완전히 무지한 상태에서 일했어서 헤더 하나 고친다고 페이지 20개 수정한 적 있는데ㅠ 억울

컴포넌트화 방식이 뭔데

중복될 것이라 예상되는(헤더,네비,푸터 같은) 요소들을 별도의 파일이나 모듈로 제작한 뒤에 이것들을 필요한 페이지마다 컴포넌트의 이름만 불러와서 쓰는 방식

BUT
안타깝게도 기존에 쓰던 방식으로는 요소를 컴포넌트화해서 제작하고 불러쓰기가 매우 불편했음. 그래서 핫해지기 시작한 것이 React라는 컴포넌트 기반의 자바스크립트 UI 라이브러리다.

reason 2

예시로 바닐라자바스크립트 환경에서 플러스와 마이너스 버튼을 사용해 숫자를 카운팅할 수 있는 기능을 구현한다고 하면,

1. 결과를 표시할 요소를 가져온다(id = result)
2. 현재 결과값을 10진수 기준, 숫자형으로 변환해서 가져와 current라는 상수에 저장한다.
3. current 상수에 저장된 값을 결과를 표시할 요소의 값에 plus라면 +1해서 입력하고, minus라면 -1해서 입력한다.

이처럼 절차를 하나하나 다 나열해야 했다. 이것을 명령형 프로그래밍이라고 한다. 제이쿼리가 바로 이것에 해당된다.

하지만 리액트와 같은 선언형 프로그래밍은 목적을 바로 말할 수 있다.

1. Plus를 누르면, result값에 1을 더한다, Minus를 눌렀다면 반대로 한다. 절차를 아주 단순화할 수 있다.

reason 3

virtual DOM (가상돔)

잦은 업데이트 상황에서 브라우저가 필요 이상으로 많은 연산을 수행해야 될 때, 즉 성능적인 문제가 있을 때를 해결하기 위한 것이 가상돔이다. 자바스크립트가 요소를 추가하는 과정에서 발생하는 변화를 가상의 돔에 미리 업데이트를 한 후(가상이기 때문에 렌더링을 거치지 않음) 한 번에 실제 돔에 업데이트 시키는 방식으로 성능적 문제를 해결할 수 있다.

JSX

const element = <h1>Hello, world!</h1>;

자바스크립트를 확장한 문법!

중괄호 안에는 유효한 모든 js표현식을 넣을 수 있다!

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

삼항연산자를 써서 조건에 따라 다른 문자열을 렌더링할 수도 있다. 이것을 조건부 렌더링이라고 한다!

const number = 5;

  return (
    <div style={style.App}>
      <MyHeaders />
      {/* 숫자나 문자열만 들어갈 수 있음 */}
      <h2 style={style.h2}>Hi react {name}</h2>
      <b id="bold_text" style={style.bold_text}>
        {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
      </b>
    </div>
  );

JSX도 표현식이다!

컴파일이 끝나면, JSX 표현식이 정규 JS 함수로 호출되고 JS 객체로 인식된다.

즉 JSX를 if나 for문 안에서 사용하고, 변수에 할당하고, 인자로 받아들이고, 함수로부터 반환할 수도 있다!!

JSX를 작성할 때 주의해야 되는 두가지

1. 닫힘 규칙

반드시 모든 태그를 닫아주어야 된다. img와 같은 self closing 태그도 닫아줘야 됨

2. 최상위 태그 규칙

가장 바깥에 있는 태그를 최상위 태그라고 한다.(아래의 코드에서 <div className="App">이 최상위 태그)

function App() {
  let name = '이름';
  return (
    // App div가 최상위 태그
    <div className="App">
      <MyHeaders />
      <header className="App-header">
        <h2>Hi react {name}</h2>
      </header>
      <MyFooter />
    </div>
  );
}

만약 최상위 태그를 지워버리게 되면 에러가 발생(JSX문법은 반드시 하나의 부모 요소를 가지고 있어야 된다.)한다. 최상위 태그 없이 하고 싶으면 리액트 프레그먼트라는 리액트의 기능을 써야 됨. 이 기능을 쓰려면

import React from 'react';

로 리액트를 불러오고,

function App() {
  let name = '이름';
  return (
    <React.Fragment>
      <MyHeaders />
      <header className="App-header">
        <h2>Hi react {name}</h2>
      </header>
      <MyFooter />
    </React.Fragment>
  );
}

<React.Fragment>로 요소들을 감싸주면 된다.

React.Fragment 너무 길고 귀찮은데;

function App() {
  let name = '이름';
  return (
    <>
      <MyHeaders />
      <header className="App-header">
        <h2>Hi react {name}</h2>
      </header>
      <MyFooter />
    </>
  );
}

그냥 이렇게 빈 태그를 열고 닫아주기만 해도 해결
💡 리액트의 기능이 필요하지 않은 컴포넌트에는 굳이 리액트를 임포트하지 않아도 된다.