[WIL] 이노베이션 캠프 4주차

문지웅·2022년 8월 25일

React WIL redux 이노베이션캠프

이노베이션 캠프

목록 보기

5/7

What I Do

리액트 숙련 주차 학습 자료 내용 이해
과제 : Redux를 사용한 TodoList 만들기
구현 결과

What I Learned

useState

함수 컴포넌트에서 가변적인 상태를 가지게 해주는 가장 기본적인 Hook

const [state, setState] = ueState(initialState)
//state: 변경할 변수
//setSate: 변수의 값을 변경하기 위한 함수
//initialState: 초기 상태

useEffect

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

useEffect(()=>{
},[])

Redux

중앙 state 관리소를 사용할 수 있게 도와주는 패키지(라이브러리)
전역 상태(Global State)관리 라이브러리
모든 state는 중앙 state 관리소에서 생성됨.

※ useState로 생성한 State는 Local State ↔ 리덕스에서 생성한 State는 Global State.

React-Router-dom

페이지를 구현할 수 있게 해주는 패키지
페이지 이동을 쉽게 구현할 수 있게 도와준다
설치 명령어: yarn add react-router-dom

React-Router-dom hooks

1) useNavigate()

어떤 버튼을 누르면 페이지로 이동하거나 또는 어떤 컴포넌트를 눌렀을 때 페이지를 이동할 수 있음.

const App = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
}

export default App;

2) useLocation()
현재 위치한 페이지의 정보를 얻어올 수 있음.

import React from "react";
import { useLocation } from "react-router-dom";

const App = () => {
  const location = useLocation();
	return <div></div>
}

export default App;

4주차 키워드

React life cycle

react는 component 기반의 라이브러리입니다.
각 컴포넌트는 생성 → 업데이트 → 제거 의 life cycle을 갖습니다.

class component: life cycle method를 사용합니다.
함수형 component: hook을 사용합니다.

React hooks

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다.
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.
Hook은 class 안에서는 동작하지 않습니다.
대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
(하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.

최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)