[REACT] 간단한 질문들.

* 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다.

 

ES6로 작성된 코드를 왜 다시 ES5로 변환을 하나?

- 구버전의 브라우저를 지원하기 위해

 

function App(){} - 함수형 컴포넌트

- 안에 들어가는 HTML 같이 생긴 내용도 HTML이 아니라 JSX이다.

 

JSX란?

- 자바스크립트 확장 문법

- 공식적인 문법이 아니다. 리액트에서만 쓴다.

 

JSX 문법

- 컴포넌트에 2개 이상의 요소가 있으면 하나로 크게 묶어야 한다.

// 안되는 문법
<h1>Hello</h1>
<h2>React</h2>



// 수정 후
<div>
	<h1>Hello</h1>
	<h2>React</h2>
</div>

- 감싸는 이유?

  - Virture DOM에서 효율적으로 비교할 수 있도록 트리 구조로 이루어져 있어야 하기 때문에.

- div가 싫다면 Fragment를 쓸 수 있다.

  - 다만, react 모듈에서 불러와야 한다.

import React, { Fragment } from 'react';

<Fragment>
	<h1>Hello</h1>
	<h2>React</h2>
</Fragment>

- Fragment도 싫다면?

<>
	<h1>Hello</h1>
	<h2>React</h2>
</>

정말 감싸주기만 하면 된다.

 

- var? const? let?

  - ES6에서 var 를 사용할 일은 없다.

  - 하지만 차이를 알아보자면 예를 들어

  - var는 전역변수, scope가 함수단위라 함수 안에서 다 통한다.

  - const, let은 지역변수, scope가 블록단위다. 함수 안에서 if블록 안에 있냐, 밖에 있냐로 다른 값이 된다.

  - const와 let의 차이는?

    - const 상수. 불변값이다.

    - let 변수. 가변값이다.

  - 기본적으로 const를 사용하고, 해당 값을 바꾸어야 할 땐 let을 사용한다.

 

- 컴포넌트 안에서 js를 쓰고 싶다면 {}로 감싸서 쓴다.

 

- 컴포넌트 안에서 if를 사용할 수 없다.

  - 삼항연산자는 사용할 수 있다.

  - (조건) ? 참 : 거짓

 

- 조건부 렌더링

  - 특정 조건에서 렌더링하고싶지 않을 때

{name === '리액트' ? <h1>리액트입니다.</h1> : null}

or

{name === '리액트' && <h1>리액트입니다.</h1>}

- name === '리액트' 부분이 false가 되기 때문에 {} 블록 자체가 false가 된다.

- 하지만 둘 중 하나가 0 을 반환하게 된다면, 0이 출력된다.

 

- undefined를 렌더링하지 않기

  - 정말 자주 만나게 되는 상황인데 책에서 언급해주셔서 좋았다.

  - 위의 상황을 반대로 이용하면 되는 듯 하다.

name || '값이 undefined입니다.'

- 인라인 스타일링

  - 카멜표기법으로 사용해야한다.

 

- class 대신 className

  - 사용은 되지만 console창에 경고가 계속 뜰 것이다.

 

- input, br 태그 등은 self-closing을 꼭 해준다.

 

- 주석

  - {/* 주석 */}

  - 너무 복잡한데, 자동완성으로 만들어 지겠지라는 생각을 해본다.

 

- ESlint

  - 문법검사

  - 메뉴 > 보기 > 문제 클릭

  - Menu > View > Problems 클릭

 

- Prettier

  - VS Code 기준

  - F1을 누르면 바로가기 창 같은게 뜬다.

  - Format Document 를 찾아서 엔터

  - Prettier Options 페이지에서 옵션값들을 찾아서 조정 할 수 있다.

  - 저장할 때 자동으로 코드 정리하기

    - File > Preferences > Settings 에 들어간다.

    - 상단 input 박스에 format 을 쓰면 Format On Save가 뜬다. 클릭.