TIL 57일차 리액트 훅

Moon Seongseok·2021년 3월 29일

React TIL react hook

React

목록 보기

2/3

오늘 목표했던 것 🗒

Recast.ly-AJAX ✓
리액트 공부 ✓

⛱ 리액트 Hook 정리

React Hook이란?

클래스를 사용하지 않고도 함수 컴포넌트에서 상태를 사용할 수 있도록 만들어주는 React의 새로운 기능이자 컨셉

React Hook이 등장한 배경

Class를 이용한 리액트 개발에서는 Javascript에서 어떻게 this가 작동하는지, 이벤트 핸들러가 어떻게 등록이 되는지에 대한 문법을 알고 있어야 한다. React 개발자들은 이러한 높은 리액트 개발 진입장벽을 낮추기 위해 Class 없이 React 기능들을 사용할 수 있는 Hook을 만들게 되었다.

리액트 Hook을 이용하여 state 생성하는 방법

Hook을 사용한 함수형 방식

 const React = (props) => {
    const [ state, setState ] = useState([])
    return (
      <div></div>
    )
  }

기존 클래스형 방식

class React extends Component {
    constructor() {
      super()
      this.state = {
        videos: []
      }
    }
    ...

리액트 훅이 등장하면서 문법이 어려운 class를 사용하지 않고도 state를 사용하여 동적인 웹앱을 만들 수 있게 되었다.

UseState 사용법

useState를 사용하게 되면, state 변수와 state 상태를 업데이트 할 수 있는 함수를 쌍으로 제공한다.

위 코드는 count라는 state 변수와, setCount라는 setState 함수를 반환하고 count의 초기값을 0으로 설정한 코드이다.

useEffect 사용법

useEffect()는 클래스에서 사용했던 componentDidmount와 비슷하게 동작을 한다.

컴포넌트가 마운트가 되었거나, 업데이트가 될 때마다 useEffect()가 호출이 된다.

위 코드에서의 실행 순서는 다음과 같다.
1. useState를 사용하여 state와 setState를 생성한다.
2. 엘리먼트들을 return하여 브라우저 화면에 띄운다.
3. useEffect()가 실행이 된다.

유튜브 클론 코딩을 진행했을 때, useEffect()를 사용하여 비디오들을 화면에 띄울 수 있었다.

	const [ videos, setVideos ] = setState([])
     useEffect(() => {
        fetch(url)
        .then(response => response.json())
        .then(result => setVideos(result.items))
        .catch(error => console.log('error', error));
    }, [])

1. 두 번째 인자로 [] 빈 배열을 넣어주게 되면, 컴포넌트가 마운트가 되었을 때만 useEffect()를 호출한다.

2. 두 번째 인자로 아무것도 넣지 않으면, 컴포넌트가 변경이 될 때마다 useEffect()를 호출한다.

3. 두 번째 인자로 특정 state 변수를 넣으면, 해당 state 값이 변경이 될 때만 useEffect()를 호출한다.

ex) [videos]를 두 번째 인자에 넣게 되면, videos 안의 값이 변경될 때만 useEffect()를 호출한다.