[항해99] 4주차 회고

한 주에 대한 정리

4주차는 React의 숙련 주차였습니다.

 

4주차에 집중적으로 배운 것은 리덕스를 통한 전역 상태관리 였습니다.

리액트가 부모 컴포넌트에서 자식 컴포넌트로 props를 전달해 줌에 따라

깊이가 깊어 지면 필요없이 전달해야하는 문제가 있습니다.

 

이를 해결하기 위해 배운 것이 상태관리였고, 리액트에서 가장 많이 사용하는

리덕스를 이용했습니다. 또한, firebase를 사용해 서버리스 서비스를 경험해 보았습니다.

 

아래에서는 리액트가 클래스 컴포넌트가 아닌 함수형 컴포넌트를 사용하는 것을

권장함에 따라 라이프 사이클 메서드를 비교하고 hooks에 대해 간단히 알아보겠습니다.

 

라이프 사이클

먼저, 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 말합니다.

라이프 사이클을 크게 3가지 유형으로 나눌 수 있습니다.

이는 생성될 때(Mount), 업데이트 할 때(Update), 제거할 때(Unmount) 입니다.

 

라이프 사이클을 리액트에서 메서드로 사용하기 위해서는

클래스 컴포넌트와 함수형 컴포넌트의 사용법이 다른 것을 알아야 합니다.

 

클래스 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount

등의 메서드를 사용하고, 함수형 컴포넌트는 useEffect를 활용하여 사용합니다.

 

자세한 내용은 따로 작성했으니 보시면 좋을 것 같아요!

 

 

[React] 라이프 사이클

 

 

리액트 hooks

hooks는 위에서 말했듯이 함수형 컴포넌트를 권장함에 따라 생겼습니다.

hooks는 함수형 컴포넌트에서 상태 관리나 라이프 사이클을 사용할 수 있도록 해줍니다.

 

useState

많은 hooks중 하나인 useState를 보면서 어떻게 사용되고 있는지 

간단하게 살펴보겠습니다.

 

아래 예제는 useState를 사용하여 더하기 빼기의 역할을 하는 것을 보여줍니다.

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

const [number, setNumber] = useState(0);

위의 코드에서 useState의 ()안에 값은 초깃값을 setNumber은 상태값의 변경할때 사용됩니다.

 

 

 

정리

항해의 4주차는 숙련주차 였던 것 만큼 리액트를 다루는 것에 조금 더 익숙해지고,

다양한 이론들을 알 수 있었던 시간이었습니다.

 

다음주는 주특기 심화주차로 더욱 리액트를 잘 다룰 수 있게 되었으면 좋겠습니다!!