코드

import logo from "./logo.svg";
import "./App.css"

import 구문이 사용되었고 이 의미는 특정 파일을 불러오는 것을 의미한다. 리액트로 만든 프로젝트의 js파일에서는 import를 사용하여 다른 파일들을 불러와 사용이 가능하다.

모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 js를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다. 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)라는 것이 존재한다(파일을 묶듯이 연결하는 것)
리액트는 주로 웹팩을 사용한다. 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다.
대표적인 번들러는 웹팩, Parcel, browserify가 있다.
번들러 도구를사용하면 import로 모듈을 불러왔을때 불러온 모듈을 모두 합쳐 하나의 파일을 생성해 준다. 또한 최적화 과정에서 여러 개의 파일로 분리 될 수 있다.

웹펙을 사용하면 SVG파일, CSS파일도 불러와 사용이 가능하다. 이렇게 파일들을 불러오는 것은 웹펙의 로더(loader)라는 기능이 담당한다. 로더는 여러가지 종류가 있다. css-loader는 CSS파일을 불러오고, file-loader는 웹 폰트, 미디어파일 등을 불러오고, babel-loader는 js파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용해 ES5문법으로 변환해준다.

최신 자바스크립트로 작성된 코드를 왜 변환하는지?

최신 자바스크립트 문법을 ES5 형태로 변환하는 것은 구버전 웹 브라우저와 호환하기 위해서이다. 최신 웹 브라우저에서는 자체적으로 최신 js문법을 바로 실행할 수 있지만, 구버전 웹 브라우저에서는 실행되지 않기 때문에 사전에 꼭 변환해주어야 하며, 리액트 컴포넌트에서 사용하는 JSX라는 문법이 정식 js문법이 아니므로 ES5형태의 코드로 변환해야한다.

JSX문법

• 최상위 요소가 하나여야 한다.
• 최상위 요소 리턴하는 경우, ()로 감싸야 한다.
• 자식들을 바로 랜더링하고 싶으면, <>자식들</>를 사용해야한다. => Fragment
• js 표현식을 사용하려면, {표현식}을 이용한다.
• if 문은 사용할 수 없다.
  • 삼항 연산자 혹은 &&(논리연산자)를 사용한다.
• style을 이용해 인라인 스타일링이 가능하다.
• class 대신 className을 사용해 class를 적용할 수 있다.
• 자식요소가 있으면, 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야 한다.
  • <태그>어쩌구</태그>
  • <태그/>

Props와 State

Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이다.
State는 컴포넌트 내부에서 변경할 수 있는 데이터이다.
둘 중 하나라도 변경이 발생하면, 랜더가 다시 일어난다.

Render 함수

Props와 State를 바탕으로 컴포넌트를 그린다. Props와 State가 변경되면, 컴포넌트를 다시 그린다.
즉 컴포넌트를 그리는 방법을 기술하는 함수가 랜더함수 이다.

Props

함수형 :

class형 :

함수형에선 props가 인자로 들어갔지만 class형에선 this.props로 받아와야한다.

default props : props를 default로 지정하고 싶다면 ?
class에선 2가지 방법이 있다.

함수는

State

class 컴포넌트에서 state를 정의하는 방법
1.
(state를 객체로 초기값으로 할당)

2.
(constructor 생성자 함수와 super함수로 state 초기값 할당)

State에는 규칙이 있다.
class 안에서 state는항상 객체이여야 한다. ex) state =0 안됨
이유 : 프로퍼티 안에 있는 값을 직접 변경해도 내용이 reder함수에서 다시 반영 되지 않음. 물론 reder함수를 재호출 하면 가능하겠지만 state값이 바뀌면 자동으로 리렌더링이 일어나야 함.
결론 setState() 함수 사용.

setState 1번 방법
(객체를 통체로 새로 만들어서 넣는 방식)

setState 2번 방법
(이전의 값을 이용하는 방식)