2021_12_21 React 특강

React: Hooks

• React 16.8버전이 표준이다(쓰다보니)
• React 표준 : 함수 컴포넌트 + Hooks

Hooks?

• Programming: Hooks
• 프로그램이 돌아가는 와중에 특정한 시점을 가로채는 행위

React Hooks?

• 컴포넌트가 동작하는 와중에 특정한 시점을 가로채기 위한 함수
• 특정한 시점에 훅스를 한다는건? 무언가 이루어지고있을때 시점을 낚아채는것
• 상태의 변화를 Hook 하기 위해 사용하는 Hook = useState()
• 컴포넌트의 렌더링 상태를 Hook 하기 위해 사용하는 Hook = useEffect()

React의 컴포넌트는 어떻게 동작하는가?

Render & State

const Paragraph = () => {
return <p> Hello World</p>
}

//Paragraph 라는 함수가 return 으로 JSX를 반환하기 때문에 이 함수를 React 컴포넌트라고 한다.
// React.Element 가 있는데
// 실제로 리엑트 런타임에는 
// new React.Element('p', { <- 이런식으로 쭈루룩 삽입
ReactDOM.render(<Paragraph />, document.getElementById('#app'));

// 현재 페이지에 실제로 렌더링되어있는 것과 React의 컴포넌트 트리(Virtual DOM) 사이를
// Diff (비교)를 한다 비교를 했을 떄 바뀐 값이 있을 떄마다 다시 렌더링 (React re-render)

Virtual DOM

• 실제페이지에 렌더링 안되고 document 모델도 아니다
• 실제 DOM은 아니지만 DOM과 유사한 형태로 React 자체적인 DOM 트리를 생성한 것
• Virtual DOM에서 특정한 컴포넌트의 State가 바뀌면 Re-Render를 수행한다.

우리가 작성한 JSX를 모아 virtual DOM 객체트리를 만든다
APP
 ㄴ P
   ㄴ "Hello World"

• React 렌더링에서 가장 중요한 것
  • state를 어떻게 관리하느냐
  • 부모에서? 자식에서? 현재까지 리엑트에서 가장 중요한 역할을 하고있다
• 컴포넌트의 상태는?
  • 최적화, 관심사 분리, 추상화 다 있다

기억할 것

• React 에서는 State가 바뀌면 Re-render가 일어난다
• 특정한 요소의 State가 바뀌었을 때,
• Virtual DOM과 실제 Rendering 된 DOM을 비교해서 해당 요소만 다시 렌더링 시킨다.
  • 달라진 부분만 다시 렌더링 한다.

useState

• 특정 컴포넌트에서 State(상태)를 쓰겠다. 
• 그 상태가 변경되는것도 내가 제어 하겠다.
• React에서 상태는 항상 바뀌는 값이다
• 안 바뀌는 값(=상수)은 State로 만들 필요가없다
• Re-Render가 안일어난다? State(상태)가 안바뀌고 있다는 뜻이다

어느 시점에 상태를 쓰고? -> 값이 바뀌어야할 떄

어느 시점에 상수를 쓰나? -> 값이 고정일떄

useEffect

• 렌더링이 완료 되었을 때 실행하는 함수
• useEffect Hook을 포함하고 있는 컴포넌트가 화면에 노출되었을 떄 실행하는 함수
  • 해당 컴포넌트가 렌더링된 경우
  • 해당 컴포넌트 혹은 해당 컴포넌트의 부모 컴포넌트가 Re-render 되는 경우
  • 렌더링 끝나고 일처리가 추가필요할때 쓴다~
• 의존성 배열
  • 상태가 바뀐다 = useEffect가 호출된다.
  • 특정한 state가 바뀔 때에만 해당 useEffect를 호출하겠다. 
  •  

 

※ React 에서는 리 렌더링을 발생시키려면 useState를 사용해야한다.

※ useEffec는 useState를 이용하면 자연스레 발생한다.

 

 

React:useSWR

- 데이터를 불러오는것

fetch API and axios

• Fetch API - 어디선가 데이터를 불러오는 API
  • 데이터를 불러올 곳 = API endpoint (끌점)
  • fetch(EndPoint)
    • fetch(클라) : 데이터 요청을 보낸다 (??? : 야 데이터 내놔)
    • 서버 : 데이터 응답 (???: 네.. 드리겠습니다.)
      • 클라이언트의 요청과 서버 응답은 절대 동시에 일어나지 않는다 ( => 비동기)
    • 클라 : 데이터 수신(Promise)
      • .then 또는 .error 로 처리
    • 예시) 배민에서 음식을 주문하면 바로 도착하나? 30분 뒤에 도착
      • 음식을 주문 : 데이터 요청
      • 음식이 도착 : 데이터를 응답

let datas;

fetch('https://api.sampleap.com/wines/reds')
	.then((response) => { 
    	response.json().then(data) => {
        	datas = data;
        })
    })  // 성공하면 then
    	.catch((error) => { }) // 실패하면 error
        
        
fetch('https://api.sampleap.com/wines/reds')
	.then((response) => response.json())
    .ther((data) => data))

Axios

• Fetch를 쉽게 할 수 있도록 만들어주는 라이브러리
• Axios의 모든 기능은 Fetch로도 만들 수 있긴한데 너무 어렵고 번거롭다.
• Error 핸들링도 동일하다.
• 우리는 Axios를 쓸거긴 하다

axios.get('https://api.sampleap.com/wines/reds')
	.then((response) => response.data)

Async - Await

• 데이터를 불러오는건 어떻게할 수 있다.
• fetch.then().then().then() 
• 모든 함수는 A를 호출하고 B를 하고 B가 끝나면 C를 한다
• promise 참조 https://ko.javascript.info/async
• 상세 내용 https://ko.javascript.info/async-await

// async 함수를 호출하면 return promise로 리턴이된다
const getData = async () => {
	const response = await fetch('https://api.sampleap.com/wines/reds');
    const json = await response.json()
    return json.data;
}

//then then then 하던거를 심플하게 만들어버릴 수 있다

 

useSWR hooks

• State가 바뀌어야 re-render가 발생한다
• Fetch API or Axios는 비동기다
• Q. Axios로 데이터를 받아와서 State를 바꾸려면 어떻게 해야할까요?
• A1. useEffect 에서 데이터를 불러오고, 두번째 인자로 의존성 배열을 빈 배열로 넣어서 State 변경되어도 useEffect가 여러번 호출되지 않게 한다.

• const WindePage - () =>{
  	const [ wines, setWines] = useState([]);
      
      return (
      <div>
      	(wines.map((wine) => {
          return (
          <div>
          	(wine.title)
              </div>
          )
          })
          </div>
      )
  }

• yarn add axios
• yarn add swr

 

wine/port.tsx 수정

types/Wine.ts 작성

utils/fetcher.ts 작성

 

서바사이드렌더링으로 돌리는것은?

NEXT:Server-side Rendering

getServerSide <- SWR 에서는 사용할 수 없다!!

 

components/Error.tsx

components/Loading.tsx

components/index.tsx

components/WineCard.tsx

import가 너무 늘어나면 보기 안좋으니깐 index에 몰아놓고

index 하나만 inport 하게 해서 코드 간소화

 

 

과제가 뭐냐면

beers API를 이용해서 beers 페이지를 만드는게 목표였지만 이것이 챌린지

 

Sync all APIs with Wine Page

• Pages 내부에 있는 모든 WIne 페이지에서 API를 연동해주세요