React | Review

🌱 Intro to REACT 🌱

🌱 React를 쓰는 이유

웹의 발전으로 웹에 다양한 데이터가 들어가고 화려한 UI를 생산성있게 구현하기 위해서

🌱 대표적인 Frontend Framework(Library)

Angular/Vue/React

🌱 React를 배워야하는 이유!

사용자가 많아서 생태계가 활성화 되어있고 페이스북의 꾸준한 관리로 여러가지 데이터가 문서화가 잘되어있어서 배우는 입장에서 쉽게 시작할수있음

🌱 Virtual DOM

DOM: 자바스크립트에서 HTML을 객체화 시켜서 접근할수있는 모델
실제 DOM을 똑같이 복사를 해서 UI가 바뀌는 부분만 교체해준다.

🌱 Node.js & npm

Node.js는 자바스크립트가 서버와 같은 브라우저 밖에서도 동작하게 하는 환경을 말한다. 리액트는 웹에서 실행되지만 바벨, 웹팩과 같은 프로젝트에 필요한 주요 도구들이 Node.js기반이기 때문에 반드시 설치해야한다.
npm은 Node.js를 설치하면 자동 설치가 되는데 npm을 통해서 다양한 패키지를 설치하고 버전을 관리할수 있다.

---

🍒 What is CRA ? 🍒

🍒 CRA (Create-React-App)

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구
CRA는 리액트로 웹 어플리케이션을 만들기 위한 환경을 제공한다
CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다
CRA의 초기폴더는 크게 [node.modules - package.json - .gitignore]와 [index.html - index.js - App.js]로 구성되어 있다.

🍒 node.modules

CRA를 구성하는 소스코드들이 들어있는 패키지 폴더

🍒 package.json

CRA기본 패키지 외 추가로 설치된 라이브러리/패키지 정보가 기록되는 파일
dependencies안에는 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능

❗️ node.modules & package.json에서 이중으로 관리하는 이유?

협업을 할때, 내가 설치한 패키지는 내 로컬에만 저장이 되는데 github에 올릴때 내가 작성한 코드와 package.json(+추가로 설치한 정보)을 올린다. 다른 사람이 그걸 pull해서 npm install을 하면 package.json에 기록되어있는 나의 추가 패키지가 자동으로 설치된다.

🍒 .gitignore

github에 올리고 싶지않은 폴더와 파일을 작성할수있다.
node.modules 같은 경우 무겁기때문에 github에 올리지 않는다.

---

⭐️ Component and JSX ⭐️

⭐️ Component의 정의와 특징

정의: 재활용 가능한 UI 구성 단위
특징: 재활용하여 사용할 수 있고 코드 유지보수에 좋다. 그리고 해당 페이지가 어떻게 구성되어있는지 한눈에 파악할수있다.

⭐️ Class vs. Functional Component

클래스형 컴포넌트에서는 render 함수가 꼭! 있어야하고 그안에 보여줘야할 jsx를 반환한다
함수형 컴포넌트는 훨씬 간단하고 작성하기 편리하다. 원래는 state와 lifecycle method가 없었으나 hooks의 도입으로 state와 lifecycle method를 쓸수있게 되었다.

⭐️ JSX

Javascript Syntax Extension 자바스크립트 확장문법
JSX로 작성된 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환된다
장점: html 태그를 그대로 사용하기 때메 보기 쉽고 익숙하며 html tag와 자바스크립트를 동시에 사용할수있다

⭐️ JSX 특징

자바스크립트 형태를 사용할때는 curly bracket을 사용한다 { }
class 대신 className을 사용한다
inline-styling을 할 경우에는 자바스크립트코드 + 스타일링이기때문에 curly bracket을 두번 사용한다

<div style={{color : "red"}}>Hello React</div>

모든 요소는 최상위 요소에 감싸여 있다. <> ... </>

---

🍎 React Router & SASS🍎

🍎 SPA

SPA (Single Page Application)이란 페이지가 한개인 어플리케이션을 말한다.
리액트 프로젝트에서 .html파일은 단 한개! 즉, Single Page Application이다.

🍎 Routing

한개의 웹페이지안에서 여러개의 페이지를 보여주는 방법이 바로 Routing이다. 리액트 자체에는 이러한 기능이 내장되어있지 않기때문에 React Router 같은 third party library를 추가 설치 해주어야한다. (리액트가 framework가 아닌 library로 분류되는 이유가 이러한 기능들이 내장되어있지 않기때문!)

🍎 <Link> vs withRouterHOC

<Link>는 클릭시 바로 이동하는 로직 구현시에 사용하고
withRouterHOC는 페이지 전환시 추가로 처리해야하는 로직(backend API로 데이터 전송, user data 인증/인가 등등)이 있는 경우 사용한다.

🍎 SASS

Syntactically Awesome StyleSheet
CSS Preprocessor, CSS가 동작하기전에 사용하는 기능으로 CSS의 불편함을 상쇄시켜주는 CSS 확장버전
일단 SASS로 작성하고 웹에서 동작 가능한 표준의 CSS로 컴파일한다.

---

🌈 State & Event🌈

🌈 State란

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
화면에 보여줄 컴포넌트의 UI정보를 지니고 있는 객체
state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될수 있음

🌈 State에서 상태값을 설정하는 이유

컴포넌트 안의 요소에서 그 상태값을 반영하여 데이터가 바뀔 때마다 효율적으로 화면에 나타내기 위해서

🌈 state를 업데이트 시켜줄땐?

setState()를 이용해서 state를 업데이트 시켜준다. 업데이트 할때마다 render함수가 호출된다

---

🌸 Props & Event🌸

🌸 Props란

컴포넌트의 속성값
부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체
Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값과 event handler를 넘겨줄수있음

🌸 Props는 객체다!

this : 해당 컴포넌트
this.props : 해당 컴포넌트의 props 객체
this.props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

---

🍷 Mock Data🍷

🍷 Mock Data의 정의와 필요한 이유

샘플 데이터, 실제 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만든 데이터
프로젝트 진행시 API가 나오기전에 프론트엔드의 페이지 레이아웃이 먼저 나오는 경우가 많기때문에 mock data를 만들어서 데이터가 들어오는 상황을 미리 대비하고 구현하는지 확인해야한다
https://ko.reactjs.org/docs/thinking-in-react.html

---

🍉 Data 호출을 위한 fetch 함수🍉

예리님 블로그 참고: https://yeri-kim.github.io/posts/fetch/

🍉 fetch 함수란?

백엔드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답할때 쓰는 함수 (axios 라이브러리도 사용 가능!)

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

🍉 method가 get인 경우

fetch()함수에서 default method는 get!
Get은 조회할때 사용한다

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

🍉 method가 post인 경우

post인 경우 fetch함수에 method 정보를 넘겨줘야한다.
Post는 생성할때 사용한다.
Body는 객체형태이며 JSON.stringfy()를 이용해서 JSON파일로 바꿔준다.
res.json()은 백엔드에서 받아온 json()형태를 자바스크립트 객체로 변환해준다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({ //json형태로 변환
        name: "myname",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })