리액트 2장 정리

2.1 코드이해하기

Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올수 있다.

대표적인 번들러로 웹팩, Parcel, browserify라는 도구들이 있으며, 각 도구마다 특성이 다르다. 리액트 프로젝트에서는 편의성과 확장성이 다른 도구보다 뛰어나 주로 웹팩을 사용하는 추세이다. 번들로 도구를 사용하면 import(또는 require) 로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일로 생성해준다.

import구문은 2017년 부터 부라우저에서도 사용하게 되었지만 이는 단순히 다른 경로에 있는 자바스크립트를 불러오는 용도로만 사용되기 때문에 프로젝트 번들링과는 별개이다.

create-react-app 으로 생성하는 것으로 웹팩의 로더를 설치하는 것을 대신할수 있다.

생성이 완료되면 App이라는 컴포넌트를 만들어준다. function 키워드를 사용하여 컴포넌트를 만들었지요? 이러한 컴포넌트를 함수 컴포넌트라고 부릅니다. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냅니다. 함수에서 반환하는 내용을 보면 마치 HTML을 작성한것 같지만 HTML이 아니다. 그렇다고 문자열 템플릿도 아니다. 이런 코드는 JSX라고 부른다.

2.2 JSX란?

JSX는 자바스크립트의 확장 문법이면 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX 코드가 어떻게 변환되는지 확인해보자.

function App(){
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

이렇게 작성된 코드는 다음과 같이 변환된다

function App(){
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}
//React.createElement(component, props, ...children)

만약 컴포넌트를 렌더링 할 때마다 JSX코드를 작성하는 것이 아니라 위코드 처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편하겠지만 JSX를 사용하면 매우 편하게 UI를 렌더링 할수 있다.

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

2.3 JSX의 장점

1. 보기 쉽고 익숙하다
2. 더욱 높은 활용도(HTML 태그를 사용하여 작성이 가능)

2.4 JSX문법

JSX는 정말 편리한 문법이지만, 올바르게 사용하려면 몇 가지 규칙을 준수해야 합니다.

2.4.1 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다. 부모요소를 지우고 여러개 요소를 그냥 두게 되면 에러가 발생한다.
< div >요소가 굳이 필요 없을때는 < Flagment > 혹은 <> 요소로 감싸주면 된다.

2.4.2 자바스크립트 표현

JSX가 단순히 DOM 요소를 렌더링하는 긴으밖에 없었다면 뭔가 좀 아쉬웠을것입니다. JSX 안에서는 자바스크립트 표현식을 쓸 수 있습니다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸주면 된다.

const name ='리액트'

return <h1>{name} </h1>

ES6의 const와 let사용

const 는 상수로써 값을 입력하면 새로운 값을 입력 불가
let은 값 변경이 가능하다.
var는 전역변수로써 괄호 밖에도 영향이가 사용을 지양해야 한다.

2.4.3 if문 대신 조건부 연산자

JSX 내부에서는 if문을 사용할수 없어 조건에 따라 다른 내용을 렌더링 해야 할때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {}안에 조건부 연산자(삼항 연산자)를 사용 하면된다.

삼항연산자에는 else if가 불가능 하기에 else if를 사용할 때는 미리 설정을 해놓아야 될것 같다.

const name = "렉트"
//삼항연산자
{name === "리액트" ? "<h1>리액트입니다</h1>" : null}
//AND 연산자(&&)를 사용한 조건부 렌더링
{name === "리액트" && "<h1>리액트입니다</h1>"}
// false일시 아무것도 표현하지 않을때는 이 방법이 더 간결하다.

//OR 연산자(||)를 사용한 조건부 렌더링
{name || '값이 undefined입니다.'}
// JSX에서 는 괜찮지만 값이 undefined인 값을 return해주게 되면 에러가 발생한다.
// 이를 방지하기 위해 undefined로 의심가는 값은 OR연산자를 사용해야한다.
// JSX에서는 undefined일때 내가 원하는 값으로 출력되도록 할수 있다.

2.4.6 인라인 스타일링

리액트에서 DOM요소에 스타일을 적용할 때는 문자열 형태로 ㄴ허는 것이 아니라 객체 형태로 넣어주어야 한다 스타일 이름중에 background-color처럼 -문자가 포함되는 이름이 있다면 -를 없애고 카멜표기법으로 작성해야 한다.
background-color -> backgroundColor
font-size -> fontSize
font-weight -> fontWeight

또한 padding 같은 경우는 단위를 생략하면 px로 자동지정된다.

2.4.7 class대신 className

HTML에서는 클래스를 사용할때 class로 작성을 하지만 리액트 JSX에서는 className으로 설정해주어야 한다.

2.4.8 꼭 닫아야 하는 태그

br, input태그 등은 HTML에서는 태그를 닫지 않아도 정상 작동되지만 JSX에서는 에러가 발생되기에 꼭 태그를 닫아주어야 한다.

2.4.9 주석

JSX 안에서의 주석은 일반 자바스크립트에서 주석을 작성할 때와 조금다르다

// 자바스크립트의 주석
/* 자바스크립트의 여러줄 주석*/
{/* JSX에서의 주석 */}
<div
// 단 시작태그 안에서는 자바스크립트처럼 작성이 가능하다.
>

2.5 ESLint와 Prettier 적용하기

1. ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메세지를 VS Code 에디터에서 바로 확인할 수 있게 해준다.
   에디터 하단에 뜨는 문제 탭은 VS Code의 상단 메뉴에서 보기> 문제 클릭시 열수 있다.
2. Prettier 를 이용하면 자동코드 정리를 하면 코드가 제대로 정렬되고 세미콜론(;)이 빠진 곳에서는 세미콜론도 자동으로 추가된다. 따옴표도 설정한 것으로 맞춰준다.
   설정은 프로젝트의 루트 디렉터리에서 .prettierrc라는 파일을 생성한 후

{
 	"singleQuote" : true,
      	"semi" : true,
        "useTabs" :false,
        "tabWidth" : 2
  
}

이러한 방법으로 설정해주면 된다.
추가로 자동저장을 설정하고 싶다면 code > 기본설정 > 설정 메뉴를 클릭한뒤 format on save를 검색한뒤 체크박스를 체크해주면 된다.

2.6 정리

JSX는 HTML과 비슷하지만 완전히 똑같지는 않다. 코드로 보면 XML형식이지만 실제로는 자바스크립트 객체이다.