[항해99 4주차] - 리액트 숙련 WIL

서론

주특기 입문 주차를 거쳐 주특기 숙련 주차에 도달했다. 이번 주차부터는 전역적인 상태 관리를 위한 리덕스부터 DB를 다루기 위한 firestore연동까지 다뤄 제출해야하는 과제가 주어졌다. 

 

느낀점

저번 주차보다는 조금 더 어려운 인상을 받았는데 리덕스에 대한 이해도가 높지 않고 데이터 바인딩을 하는 과정이 다소 복잡해져 많은 에러가 발생했다. 코드를 많이 짜 보면 익숙해질 것 같은 인상을 받았다.

 

 

이번 주차 학습 키워드 - 라이프사이클(클래스형 vs 함수형), react hooks

---

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <><h1>메인페이지</h1></>
  }
}

 

 

함수형 컴포넌트

import React from 'react';

const App = () => {
  return <><h1>메인페이지</h1></>
}

 

 

클래스형 컴포넌트의 경우 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 함수가 제공되었으나 함수형 컴포넌트의 개념이 생기면서 복잡하고 반복되는 비생산적인 코드의 비효율성을 해소하고자 react hook라는 개념을 사용하게 된다.

 

리액트 Hooks

함수형 컴포넌트의 상태나 관리를 보다 쉽고 간단하게 도와준다.

 

출처

https://velog.io/@ki5970/React-%EC%84%9C%EB%B2%84%EB%A6%AC%EC%8A%A4https://velog.io/@ashley_ku/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-vs-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8