[웹 FE 스터디] THE BASICS OF REACT ~ 3.5 Inputs and State

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 38기_서다원

---

ref : 노마드코더 React JS로 영화 웹서비스 만들기

---

 

React의 동작방식

React는 js로 element를 만들어 이를 html 안에 넣는 역할 담당

컴포넌트를 작성해도 앱을 실행했을때 소스보기에서는 해당 컴포넌트 내용이 안보임( root div만 보임)

그래서 가상돔(virtual DOM)이라고 함 -> 리액트가 빠른 이유

 

Component란

html을 반환하는 함수

ex : <App />

Javascript랑 html이 조합된걸 JSX라고 함

대문자로 시작해야!

 

Reusable Component with JSX + Props

JSX랑 props를 사용하면 컴포넌트끼리 정보를 보낼 수 있다.

(단, 부모 -> 자식 방향으로)

-> JSX랑 props를 통해서 리액트에서 재사용가능한 컴포넌트 생성 가능

 

map()

배열의 각각의 아이템에 인자로 전달한 함수를 적용한 후, 그 결과를 새로운 배열로 리턴하는 메서드

Javascript 의 map() 을 사용하면 js 객체 형태로 된 아이템들이 여러개 들어있는 배열 다룰때 유용하다

 

protection with PropTypes

prop 전달할 때 prop 이 적절하게 들어왔는지 화인하는 것 필요

이럴 때 PropTypes 라는 걸 사용

$ npm install prop-types

로 설치하면됨

• 타입(숫자, 문자열, Boolean, ... 등등) 체크 가능
• 들어와야하는 prop명이 없는 경우도 걸러낼 수 있음
• 값이 있는지 없는지 체크 가능
• isRequired를 쓰면 꼭 받아야하는 prop임을 나타낸다. 필수적이지 않은 prop이라면 isRequired 생략 가능
• 꼭 propTypes 를 사용해서 prop type을 정의해야한다. 
• (출처:https://velog.io/@pul8219/React%EB%A1%9C-%EC%98%81%ED%99%94-%EC%9B%B9-%EC%84%9C%EB%B9%84%EC%8A%A4-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9%ED%95%98%EA%B8%B0%EA%B0%95%EC%9D%98-%EC%A0%95%EB%A6%AC-%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94)

 

참고링크 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 검사 – React

 

State

Component의 데이터를 넣는 공간.

변하는 데이터를 다루기 위해 state 사용. 

state는 객체임.

 

Class Component(클래스형 컴포넌트) vs Functional Component(함수형 컴포넌트)

Class Component는 render를 사용해 화면에 HTML을 뿌리고

(React는 자동적으로 모든 클래스 컴포넌트의 render를 실행한다),

Functional Component는 함수이기에 return문을 이용해 화면에 HTML을 뿌린다.

참고 -> 요즘엔 Class Component보다 Functional Component를 많이 사용한다.

Functional Component도 React Hook을 이용해서 State를 다룰 수 있다.

 

state는 setState를 통해서만 변경가능

setState 호출할때 react는 render function 호출

 

render 다시 호출하긴 하지만 react 는 virtual DOM 을 이용해 변화가 생긴 부분만 업데이트

-> 동작 빠르고 화면이 안깜박임

 

Component Life Cycle

리액트가 컴포넌트를 생성하고 없애는 방법

컴포넌트 생성될때 / render 전 / render 후 / 업데이트 될 때 호출되는 function이 있음

 

Mounting

render보다 먼저 constructor가 실행됨,

컴포넌트가 mount될 때, 스크린에 표시될때, 웹사이트에 들어갈 때 이 constructor라는게 호출됨.

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log('hello');
  }

  //...
  
  render() {
    console.log('render');
    return (
      <div>
        <h1>Welcome</h1>
      </div>
    );
  }
}

export default App;

위 코드를 출력해보면 constructor의 hello가 render의 console.log보다 먼저 출력된다.

 

Updating

컴포넌트가 업데이트가 될때(state를 변경할때) 호출되는 여러 function이 있다

- render() 

- componentDidUpdate() : 업데이트 됐는지 알려줌

 

 Unmounting

컴포넌트가 죽는 것(페이지가 바뀌거나 state 사용해 컴포넌트가 교체되거나)

 

fetching

자바스크립트에서 데이터를 fetch 하는 방법에는 크게

fetch와 axios가 있는데 여기선 axios 사용

axios 사용법 참고 : https://dawonny.tistory.com/286

[TIL][React] Ajax 로 GET, POST