지금까지 공부했던 React의 컴포넌트는 Class형 컴포넌트 였다.

• 본죽 클론 프로젝트에서 사용했던, Class형 컴포넌트
  -. class Nav 로 선언 되어있는 것을 볼 수 있다.
  

React에는 Class형 컴포넌트와, 함수형 컴포넌트가 있다.

먼저 Class형 컴포넌트를 공부하고 활용하면서 React의 LifeCycle에 대하여 이해할 수 있었다.

그런데...

Class형 컴포넌트 사용에 익숙해지면서, 함수형 컴포넌트를 꼭 사용해야 하는지 의문이 들었다...

지금까지 공부를 하면서 느낀 점은, 왜 이 기술이 더효율적인지 공감하기 시작할때 기술에 대한 이해와 실력이 늘어나기 시작했다.

Hooks 의 등장 배경

Hook은 Class형 컴포넌트가 가지는 단점을 해결하고자 개발 된것이다.

먼저 Class형 컴포넌트가 가지고 있는 단점을 알아보면

• 코드 구성을 어렵게 만든다.

• 컴포넌트 사이에서 관련된 로직을 재사용하기 어렵다.

• 복잡한 컴포넌트들을 이해하기 어렵다.

4가지의 Built-in-Hooks

• useState
• useEffect
• useRef
• useReducer

이 중 가장 기본적이고 핵심적인 useState 와 useEffect를 사용해보면서 기술의 발전에 공감해보려고 한다!

useState 와 useEffect

현재 프로젝트를 진행중인데, hook을 활용하여 개발하고 있다.

밑의 코드는 데이터를 불러와, 자식 컴포넌트로 보내주는 부모 컴포넌트이다.

useState와 useEffect를 활용하며, 기능을 구현하고 있어 가져와 보았다

useState

기본 개념

• constructor 라고 생각하면 좋다.

사용 방법
const [data, setImgData] = useState([])

• 먼저 React의 useState를 import 시켜준다.
• data라는 이름의 state를 설정해준다.
• data를 setState하기 위한 변수명을 setImgData 로 설정하여 준다.
• useState 함수를 사용하여, 인자로 state의 초기값을 넣어준다.
  useState([]) : data의 state값을 빈배열로 하겠다는 뜻이다.

useEffect

기본 개념

• componentDidMount, componentDidUpdate, componentWillUnmount 를 통합 하였다.

먼저 다른 예시 코드를 보면서 하나씩 살펴보자

useEffect(componentDidMount)

• 표현 방법: useEffect(() => {}, [])
• useEffect의 빈 배열은 리액트 데이터 흐름에 관여하는 어떠한 값도 사용하지 않겠다는 뜻이다.
• 즉 한번만 적용되어도 좋다는 것을 의미한다.
• componentDidMount는 React의 Lifecycle에서 한번만 실행된다.

useEffect(componentDidUpdate)

• 표현방법: useEffect(() => {}, [업데이트])
• 위의 코드를 예로 들자면, count값이 바뀔 때마다 useEffect를 실행한다는 뜻이다.

프로젝트 코드 총 정리

• 먼저 data라는 state가 있고, 초기값이 useState([]) 빈 배열임을 알 수 있다.
• useEffect는 componentDidMount로 실행되며, fetch함수를 통해 데이터를 불러온다.
• 불러온 데이터는 setImgData 로 data가 setState 된다.
• 리액트의 Lifecycle로 인해, setState된 data는 다시 렌더 되면서, 각 컴포넌트에 data를 props로 보내준다.

느낀점

• 일단 코드가 너무 간단하다! 코드를 간단하게 작성할 수 있다는 것이 너무 좋다
• 함수라고 생각하게 되니까 로직을 생각해 나가는 것이 더 편한것 같다.

Question

그렇다면 지금까지 썻던 Class 형 컴포넌트들은 어떻게 하지??

• class형 컴포넌트와 함수형 컴포넌트는 100% 리액트에서 호환한다.
• 즉 class형 컴포넌트를 함수형 컴포넌트로 바꿀 필요가 없다!!!