React Hooks

 

React Hooks

class 없이 state를 사용할 수 없는 새로운 기능

 

? Hooks가 필요한 이유

 

Class Component로 사용되어 온 React에서 느껴왔던 불편함이나 문제점 해결을 위함

 

 

                                       → Class Component : 더 많은 기능 제공 / 더 긴 코드 양 / 더 복잡한 코드 / 더딘 성능

React Component  ---                                       

                                       → Functional Component : 더 적은 기능 제공 / 짧은 코드 양 / 더 심플한 코드 / 더 빠른 성능 

---

 

관련 문제들

1. HOC 란?

 

Higher Order Component의 약자로

컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수

 

 

2. 너무나 많은 HOC를 사용하게 되면 Wrapper가 너무 많아지는데 Hooks에서는 어떻게 처리하나?

 

Custom Hooks를 이용해서 컴포넌트를 만들어서 처리

 

 

3. 생명주기를 위해서 Hooks에서는 어떤 api 사용하나요?

 

ComponentDidMount, componentDidUpadte, componentWillUnmount 모두를

Hookds에서는 useEffect를 이용해 처리

 

 

4. Hooks에서 state를 업데이트 해주려면 어떻게 해야하나?

 

state를 정의해줄 때 

const { name, setName } = useState('') 이런식으로 해줌

여기서, setName을 이용해서 state를 업데이트 시켜줄 수 있음

 

 

5. Class 컴포넌트와 비교했을 때 함수형 컴포넌트의 장점

 

더 짧고 간결한 코드, 더 빠른 성능, 더 나은 가독성

 

 

const [ expenses, setExpenses ] = useState([
  { id: 1, charge: "렌트비", amount: 1600},
  { id: 2, charge: "교통비", amount: 400},
  { id: 3, charge: "식비", amount: 1200}
])

expenses : 변수 이름 (getter)

setExpenses : state를 정하는 함수 (setter)

useState : expenses와 setExpenses 를 리턴하고 초기 state 값을 정하는 Hook