궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

🔥클래스형과 함수형 차이💧

react 컴포넌트 선언하는 2가지 방식
<클래스형 컴포넌트/ 함수형 컴포넌트>
함수형 컴포넌트를 많이 사용하도록 권장하고 있지만,
기초를 위해서는 클래스형 컴포넌트도 알고있어야한다.

VScode를 사용하여 코드를 작성하였습니다.

VScode 확장프로그램
ES7 React/Redux/GraphQL/React-Native snippets을 다운로드한뒤
클래스형 컴포넌트 js파일을 만든뒤 rce를 입력하면 클래스형 컴포넌트 코드가 자동으로 작성됩니다.
함수형 컴포넌트는 rfce를 입력하면됩니다.

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

클래스형에서는 꼭 필요한 키워드가 있다.

• class 키워드 필요
• Component 상속
• render() 메소드

함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

useState사용💻

먼저 useState를 사용하기전에 구조 분해 할당 이란걸 알아보자.

우리가 객체나 배열을 만들었다고 생각해보자. 이것을 말그대로 분해, 할당 하는 방법이다.

//객체 생성
const obj = { a: 1, b: 2, c: 3 };
//배열 생성
const array = [5, 6, 7, 8]; 

console.log(array[1]); //6출력
console.log(obj.a); //1출력

이렇게 객체와 배열이 생성되었다고 보자. 우리가 자주보던 모습이다.
그렇다면 여기서, 코드를 조금 수정해보자

//객체 생성
const obj = { a: 1, b: 2, c: 3 };
//배열 생성
const array = [5, 6, 7, 8];

const [apple, bus, car] = array;

console.log(apple, bus, car);

만약 코드가 이렇게 수정된다면 console.log에서 어떤 값이 나오게 될까?
답은

5 6 7

이 나오게 된다.

쉽게 말해서 진짜 만들어진 배열을 분해해서 다른 값으로 할당해준다 이런뜻된다. useState에서 왜 이 구조 분해 할당 얘기가 나오게 됬냐 함은 그것은 바로,
useState형식이 const[state, setState] = useState(A,B); 이렇게 되기때문이다.
useState에서 첫 번째 요소가 state(상태값), 두번째는 setState(변환)을 의미한다.

컴포넌트의 라이프사이클

라이프사이클의 메소드는 총 9개
Will 접두사가 붙은 메서드는 작업을 작동하기 전에 실행되는 메소드,
Did 접두사가 붙은 메소드는 작업을 작동한 후에 실행되는 메소드 이다.

라이프사이클의 단계

• 마운트
• 업데이트
• 언마운트

마운트(Mount)

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 함

• constructor: 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메소드
• getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메소드
• render: 우리가 준비한 UI를 렌더링하는 메소드
• componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메소드

업데이트(Update)

props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링될 때, this.forceUpdate로 강제로 렌더링을 트리거할 때

• getDerivedStateFromProps: 마운트 과정에서도 호출됨, 업데이트가 시작하기 전에도 호출, props의 변화에 따라 state값에도 변화를 주고 싶을 때 사용한다.
• shouldComponentUpdate: 컴포넌트가 리렌더링 해야 할지 말아야 할지를 결정하는 메소드
• render: 컴포넌트 리렌더링
• getSnapShotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
• componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메소드

언마운트(Unmount)

• componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메소드

Hooks

useEffect

• useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다.

useReducer

• useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다.

reducer

• reducer는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수이다.
• reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다.

useMemo

• useMemo는 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.
• 렌더링 될때 마다 실행되는 낭비를 줄여준다.(최적화)
• 렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 이용하는 방식이다.

useCallback

• useCallback은 useMemo와 비슷하다(최적화에 사용)
• useCallback을 사용하면 만들어 뒀던 함수를 재사용할 수 있다

비동기 작업

Promise

• promise는 callback 지옥같은 코드가 형성되지 않게 하는 방안입니다.
• 여러 작업을 연달아 처리한다고 해서 함수를 여러 번 감싸는 것이 아니라.
  .then을 사용해서 그 다음 작업을 설정하기 때문에 callback지옥이 형성되지 않습니다.

async/await

• Promise를 쉽게 사용할 수 있도록 해 주는 문법이다.
• 함수의 앞부분에 async 키워드를 추가하고, 해당 함수내부에서 Promise의 앞부분에 await 키워드를 사용합니다. 이렇게 하면 Promise가 끝날때까지 기다리고, 결과 값을 특정 변수에 담을 수 있습니다.
• 화살표 함수에 async/await은 async () => {} 형식으로 적용