React Hooks & Context
1. Basic Hooks
1-1. useState
- state를 대체할 수 있음
기존에는 state를 변경하려면 class 문법을 통해서만 가능했고, functional 컴포너늩에서는 구현이 불가능했지만, hook이 새롭게 업데이트 되면서 functional 컴포넌트에서도 state를 가질 수 있게 되었다.
1-1-1. class 구현(기존)
import React from 'react'
export default class Example2 extends React.Component {
state = {
count: 0,
}
render() {
const { count } = this.state
return (
<div>
<p>You Clicked {count} times</p>
<button onClick={this.click}>BTN</button>
</div>
)
}
click = () => {
this.setState({
count: this.state.count + 1,
})
}
}
1-1-2. functional 구현(1)
import React from 'react'
export default function Example2() {
const [count, setCount] = React.useState(0)
return (
<div>
<p>You Clicked {count} times</p>
<button onClick={click}>BTN</button>
</div>
)
function click() {
setCount(count + 1)
}
}
1-1-3. functional 구현(2)
import React from 'react'
// (기존) useState => count
// (수정) useState => {count: 0}
export default function Example3() {
const [state, setState] = React.useState({ count: 0 })
return (
<div>
<p>You Clicked {state.count} times</p>
<button onClick={click}>BTN</button>
</div>
)
// function click() {
// setState({ count: state.count + 1 })
// }
function click() {
setState((state) => {
return {
count: state.count + 1,
}
})
}
}
state hook
이 나오면서 ...
- (기존)
:Functional Component
=Stateless Component
=Stateless Functional Component
- (현재)
:Functional Compoent
!==Stateless Component
- 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움
: 컨테이너 방식 말고 상태에 관련된 로직- 복잡한 컴포넌트들은 이해하기 어려움
- Class는 사람과 기계를 혼동시킴
: 컴파일 단계에서 코드 최적화가 어려워짐this.state
는 로직에서 레퍼런스를 공유하기 때문에 문제 발생 가능성이 있음
: functional 컴포넌트는this.state
를 공유하지 않음
: 따라서, 어떠한 것이 맞다 틀리다가 아니라, 상황에 맞게 class 혹은 function을 적절하게 활용해야함
1-2. useEffect
- 라이프 사이클 훅을 대체할 수 있음
: componentDidMount
: componentDidUpdate
: componentWillUnmount
// useEffect
import React from 'react'
export default function Example5() {
const [count, setCount] = React.useState(0)
// React.useEffect(() => {
// console.log('componentDidMount && componentDidUpdate', count)
// })
React.useEffect(() => {
console.log('componentDidMount')
return () => {
// cleanup
// componentWillUnmount
}
}, [])
React.useEffect(() => {
console.log('componentDidMount && componentDidUpdate by count', count)
return () => {
// cleanup
console.log('cleanup by count' count)
}
}, [count])
return (
<div>
<p>You Clicked {count} times</p>
<button onClick={click}>BTN</button>
</div>
)
function click() {
setCount(count + 1)
}
}
1-3. userContext
6. Context API
에서 다룸
2. Custom Hooks
// useWindowWidth.js
import { useState, useEffect } from 'react'
export default function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
const resize = () => {
setWidth(window.innerWidth)
}
window.addEventListener('resize', resize)
return () => {
window.removeEventListener('resize', resize)
}
}, [])
return width
}
useHasMounted vs widthHasMounted
(...)
3. Additional Hooks
4. React Router Hooks
5. 컴포넌트 간 통신
6. Context API
Author And Source
이 문제에 관하여(React Hooks & Context), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@protect-me/React-Hooks-Context저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)