react.js & node.js 2일차

리액트를 사용하는 이유

• 웹사이트가 점점 더 복잡해 지면서 프론트엔드를 더 효율적으로 개발하기 위해 facebook에서 개발.
• DOM에 직접 접근하는 기존 패러다임에서 data-binding과 컴포넌트 기반의 FE 프로그래밍.

React는 컴포넌트 기반이다. React

• virtual DOM 사용
• DOM이란? Document Object Model 트리구조로 이루어진 html 모델

HTML 구조가 DOM이다. HTML 구조를 보면 html > head > body >... 쭉 내려간다. 이런식으로 tree를 가진다. 이러한 것을 dom tree라고 부른다.

React는 변화가 생기면 변화가 생긴곳만 감지해서 새롭게 정의를 해주는데 이때 변화를 해주는 횟수가 성능에 영향을 미친다. react에서는 최대한 업데이트를 한번에 몰아서 여러 업데이트를 하는 것이다. 그렇게 해서 성능에 이점을 얻었다.

React는 화면과 데이터가 연동되어 있어서 데이터가 바뀌면 자동으로 화면이 바뀐다.

그래서 컴포넌트는 React의 의미있는 한 단위이다.

 

• 컴포넌트 기반 개발 장점
  • 재사용이 쉽다
  • 코드가 간결해 진다
  • 수정이 쉽다. 
• 주의점
  • 초기에 설계를 잘 해야한다.
• 최근에는 프론트엔드 개발자에게 React.js가 기본소양이 되고 있음

eslint : JS 문법 체크

prettier : eslint에 맞게 저장할때 수정

설정(ctrl + ,) -> format 검색 -> format on save 체크, default formatter : prettier로 선택

eslint : JS 문법 체크
prettier : eslint에 맞게 저장할때 수정

 

'

하고 아무 폴더나 가서

```

npx create-react-app@latest react-app

```

 

Create React App

CRA란?
- react application을 개발할 수 있도록 미리 만들어진 프로젝트
- 일종의 보일러 플레이트(boiler plate) : 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드
- 개발자가 react app을 새로 만들 때 마다 일일이 초기작업을 하지 않아도 된다.

node.js 설치
vscode 터미널 켜기
npx create-react-app PROJECT_NAME

npm run build를 해보자

hot-reload : 저장하면 자동으로 빌드되어 웹사이트에 반영됨
babel: jsx등 es6 이후 문법을 es5문법으로 변환
webpack: import로 연결된 파일들을 묶어주는 번들러
polyfill : es5에 없는 함수들을 대응

 

이제 우리는 SPA를 만들것인데

SPA는 html 하나로 여러 페이지를 표현하는 방식이다. SPA에서는 클라이언트와 서버가 분리되어 서버는 json 정보만 준다. 반대로 클라이언트는 실질적인 내용을 빈껍데기로 렌더링하고 서버와 통신해서 내용을 받아온다.

 

이제부터 jsx를 이용해서 코드를 짜보자.

 

위와 같이 html 코드 같아보이지만 실재로는 React를 쓰기 위한 JSX 문법이다.

 

webpack이 jsx를 js로 묶어주고

babel은 jsx 문법을 브라우저가 이해할 수 있게끔 만드어준다.

polyfill은 es5에 없는 함수들을 대응해준다.

hot-reload는 페이지가 자동으로 새로고침하게끔 만들어준다.

 

static page

• html css js 파일만으로 이미 페이지가 완성된 웹페이지

dynamic page

• html 렌더링 후 서버와의 통신을 통해 내용이 변하면서 작용

CSR(Client Side Rendering)

• 최초 렌더링 후 브라우저의 JS를 통해 html을 완성
• 라우팅도 브라우저의 JS가 담당

초기에는 빈껍데기만 있지만 나중에 js가 내용을 채워 넣는다. 이게 react의 작동바식이다.

SSR(Server Side Rendering)

• html렌더링, 라우팅을 서버가 담당

서버 사이드 렌더링과 클라이언트 사이드 렌더링이란 무엇인가요?

이미 브라우저가 받아올때 다 완성된것을 받아온다.

 

모듈화를 하는 이유
1. 유사한 기능끼리 묶어서 관리 가능
2. 변수 이름 짓기 쉬워짐
3. 재사용하기 쉬워짐

 

첫 컴포넌트를 만들었는데 만들때 Jsx는 반드시 하나의 성분만을 반환해주어야 한다. 그래서 React.Fragment로 감싸주는데 위와 같이 빈태그도 같은 것으로 취급한다.

 

리액트 컴포넌트는 가급적 대문자로 시작하고 파일명도 대문자로 시작해주자.

 

그리고나서 위와같이 컴포넌트를 불러오면 화면이 뜬다.

 

위와같은 것들이 조건문에서 falsy로 인식한다.

 

코드를 위와같이 짜주어서 스타일을 적용시킬수도 있다.

 

 

이번에는 index.css에 속성을 지정해서 컴포넌트에 적용시키어보자.

 

이번에는 파라미터를 넘기는 것을 해보자. props는 부모 컴포넌트에서 보내준 값이다.

위와같이 변수를 넘기어주면 함수가 props라는 객체형식으로 받아온다.

 

React Component는 컴포넌트 안에 내용을 담을 수도 있다. 

 

대충 위와같이 작성했다고 하자. 이것을 출력하기 위해서는 props 객체를 이용해야한다. 

 

props.children으로 출력해주어야 한다. children 은 이미 이름이 정해져있는 만큼 props의 성분으로 쓰면 안된다.

 

또한 props도 비구조화 할당이 가능하다.

 

위와같이 두가지 방법으로 데이터를 받아올 수 있다.