WIL

항해99 Week I Learn - week04

__g__ 2022. 6. 6. 00:19

react 컴포넌트 선언하는 방식은 클래스형과 함수형이 있다.

과거에는 클래스형 컴포넌트를 주로 사용했지만,  리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었다. 현재 클래스형 컴포넌트를 자주 사용하지 않지만, 여전히 사용하는 기업들이 있으므로 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다.

 

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    return( 
    <div>
    </div>
    )
  }
}

export default App;

함수형 컴포넌트

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

function App() {
 return(
 <div></div>
  )
}

export default App;

클래스형과 함수형의 특징

클래스형 함수형
Component로부터 상속을 받아야한다.
class 키워드가 필요하다.
render()가 필수적이다.
state와 라이프사이클 API를 사용할 수 있다.		 클래스형 컴포넌트보다 선언하기 수월하다.
클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
state, 라이프사이클 API를 사용할 수 없다 -> React Hooks을 통해 해결 할 수 있음

 

 

 

React Hook

리액트 훅은 React 16.8 버전에서 새로 추가된 기능으로 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. 

 

Hook 규칙

최상위에서만 Hook을 호출해야한다.

반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우, 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 그렇기 때문에 이 규칙을 따르면 useState와 useEffect가 여러 번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있게 된다.

리액트 함수 내에서만 Hook을 호출해야한다.

Hook은 일반적인 js 함수에서는 호출하면 안된다. 함수형 컴포넌트나 custom hook에서는 호출 가능하다.

 

자주 사용하는 React Hook

useState

  • useState는 상태를 관리하는 훅이다.
  • 함수형 컴포넌트 안에 state를 추가하여 사용한다.
  • 현재 상태를 나타내는 state값과 이 상태를 변경하는 setState값을 한 쌍으로 제공한다.
  • state는 초기값을 설정할 수 있으며, 초기값은 첫 렌더링 때 한 번 사용된다.
  • state는 객체일 필요 없이 문자열, 숫자, boolean, 배열, null, 객체 등 여러가지 다양한 값을 넣을 수 있다.

 

useEffect

  • useEffect는 기존 클래스형 컴포넌트에서 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 통합한 것이다.
  • useEffect는 기본적으로 useEffect(function, deps)의 형태를 사용한다.
  • function에는 실행시킬 함수를 넣고 deps에는 의존성 배열을 담는다.
  • 의존성 배열에 어떤 것이 담기느냐에 따라 부수적인 효과 함수가 실행된다.
    • 의존성 배열 없이 useEffect를 실행시키게 되면 페이지가 렌더링 될 때마다 데이터를 불러온다.
    • 의존성 배열에 빈배열을 담아주게 될 경우에는 첫 렌더링 시에만 함수를 실행한다.
    • 의존성 배열에 state 값이나 props로 상속받은 데이터값 등을 담아주게 되면 해당값이 변할 때마다 함수를 실행한다.

 

useRef

  • useRef는 특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅이다.
  • 특정 요소를 선택해야 하는 상황이 생길 수 있는데 이러한 상황에서 useRef 함수를 이용하여 선택할 수 있다.

 

 

 

더보기

감이 잡히는 듯, 안 잡히는 듯 어려운 리액트. 이번 주가 마지막 기본기 주차라는 것이 믿기지가 않는다. 시간은 빠르고 리액트는 여전히 어렵다.