TIL - 20230201

 

복습하기.

 

React Lifecycle

lifecycle method 는 클래스형 컴포넌트에서만 사용 가능함.

 

출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

핵심 생명주기 함수

 

1. mount (DOM 에 나타날 때)

- constructor

- render

- componentDidMount

 

2. update

- render

- componentDidUpdate

 

3.unmount (DOM 에서 사라질 때)

- componentWillUnmount

 

클래스 컴포넌트와 함수 컴포넌트의 차이

 

클래스 컴포넌트

- constructor 에서 state 를 정의함.

- setState 를 이용해서 state 업데이트.

- 생명주기함수 제공.

 

함수 컴포넌트

- state 사용 불가.

- 생명주기함수 없음.

- Hook 을 이용해서 state, 생명주기함수 기능을 대체함.

 

예를 들어

useEffect 로 componentDidMount() 를 대체할 수 있음.

(useEffect(()=>{},[]) -> 기본적으로 앱 실행 후 첫 번째 렌더 후에 한 번 실행이 됨.)

import React from 'react';

const App = () => {

  useEffect(()=>{
    console.log('반갑습니다')
  })

  return (
  <div>
    {console.log('안녕하세요')}
  </div>
  );
}

export default App;

1. 안녕하세요 2. 반갑습니다 순으로 콘솔에 찍힌다.

 

그리고 2번째 인자인 배열 안에 값이 들어가면 렌더링될 때마다 그 값을 호출함. 이로서 state 값이 바뀔 때마다 호출이 되는 componentDidUpdate() 도 대체한다는걸 알 수 있다. 즉 state 가 업데이트가 되었는지 알려줄 수 있음. 배열 안엔 여러 개의 값이 들어갈 수 있고 그 중 하나라도 state 값이 변하면 useEffect 가 호출 됨.

-> 배열 안에 값이 없으면 componentDidMount() 처럼 작동.

-> 배열 안에 state 가 있으면 componentDidMount() + componentDidUpdate()

-> 배열 안에 여러 개의 state 가 들어있어 동시에 업데이트 되었다해도 한 번만 호출 됨.

 

 

 

React-Bootstrap

사용하기

// npm
npm install react-bootstrap bootstrap
// yarn
yarn add npm react-bootstrap bootstrap

패키지 설치 후 필요한 필요한 컴포넌트를 import 해 사용하면 된다.