React Hooks 마법. 그리고 깔끔한 사용기

React Hooks 마법.
그리고 깔끔한 사용기
Naver 쇼핑 최효석

개발은…
재미있으신가요?

개발은…
재미있습니다.때때로…

코드를 짜고 싶습니다.
• 간결
쉽게!
• 로직 예상이 쉽고
• 읽기 쉽고
• 재활용이 쉬운

React Hooks 한번 사용해 볼까?

- Facebook 주도의 오픈 소스
- MVC 중 view 를 처리하는 프레임워크
- 자체적인 state 를 관리하는 component 기반으로 개발

component 기반 개발
기본적으로 component 는
javascript class 를 활용
=> class component

* hook – 갈고리로 걸다
functional component 에서
class component 에서만 사용할 수 있었던
state, lifecycle feature 를 갈고리를 걸어 사용한다

왜!
functional component 에서
state, lifecycle feature 사용?

• class component
• functional component
복잡
간결

왜 class component 가 복잡한가?

1. Stateful logic 재활용이 어렵다
- higher order component (HOC)
- render props

component hierarchy 변경 예시
Component hierarchy 변경
export default styling(s)(Home)
function styling(...styles) {
return function wrapStyling(ComposedComponent) {
class Styling extends React.Component {
render() {
return <ComposedComponent {...this.props} />
}
}
return hoistStatics(Styling, ComposedComponent)
}
}

component hierarchy 변경 예시
DevTools 의 wrapper hell

class PhotoVideoList extends React.Component {
async componentDidMount() {
await this.fetchPhotoVideoItems()
}
async componentDidUpdate(prevProps) {
if (this.props.photoVideoReviewIds !== prevProps.photoVideoReviewIds)
{
}
}
fetchPhotoVideoItems = async () => {}
}
2. lifecycle method 작성이 어렵다
1) lifecycle feature 간 로직 중복

class EventDetail extends React.Component {
componentDidMount() {
setInitApplyProducts({})
moveScrollByHistory()
setApplyProducts({})
}
componentDidMount(prevProps) {
if (prevProps.applyProductsState !== this.props.prevProps.applyProductsState) {
}
}
}
2) 1개 lifecycle feature에 lifecycle 에 수행되는 로직 몽땅

3) 관련 있는 로직이 다른 lifecycle feature 에 위치
class FloatingBanner extends React.Component<OwnProps, OwnState> {
window.addEventListener('orientationchange', this.handleOrientationChange)
}
componentDidUpdate() {
}
componentWillUnmount() {
window.removeEventListener('orientationchange', this.handleOrientationChange)
}
}

3. Javascript class 가 어렵다
- 개념이 어렵다
- this, bind event handler, extends, prototype 등
- 쉽게 사용하기 위해 여러 plugin 필요

왜 functional component 가 간결한가?

1. Stateful logic 재활용이 쉽다
- custom hooks

const ProductBenefitMenus = () => {
useUlSmoothScroll()
return (
<div />
)
}
const HomeFilterOption = () => {
useUlSmoothScroll()
return (
<div />
)
}

2. lifecycle method 작성이 쉽다
1) lifecycle feature 간 로직 중복 없음
class PhotoVideoList extends React.Component {
fetchPhotoVideoItems = async () => {}
async componentDidMount() {
}
async componentDidUpdate(prevProps) {
if (this.props.photoVideoReviewIds !==
prevProps.photoVideoReviewIds) {
}
}
}
class component functional component
const PhotoVideoList : React.FC => {
useEffect(() => {
const fetchPhotoVideoItems = async () => {}
fetchPhotoVideoItems()
}, [photoVideoReviewIds])
}

2) 다른 logic 은 다른 lifecycle feature 에 설정
const EventDetail : React.FC => {
useEffect(() => {
}, [])
useEffect(() => {
}, [applyProductsState])
useEffect(() => {
}, [applyProductsState])
functional component
class EventDetail extends React.Component {
}
componentDidUpdate(prevProps) {
if (prevProps.applyProductsState !==
this.props.applyProductsState) {
}
}
class component

3) 관련 있는 로직은 같은 lifecycle feature 에 설정
const FloatingBanner: React.FC = () => {
useEffect(() => {
const handleChange = () => {}
window.addEventListener('orientationchange', handleChange)
return () => {
window.removeEventListener('orientationchange', handleChange)}
}, [])
}
class FloatingBanner extends React.Component {
handleChange = () => {}
window.addEventListener('orientationchange', this. handleChange)
}
componentDidUpdate() {}
componentWillUnmount() {
window.removeEventListener('orientationchange', this.handleChange)
}
}
class component

3. Javascript class 사용 안함

One more thing…
class Statistics extends React.Component {
render() {
return (
<VerticalContext.Consumer>
{({ subVertical }) => (
<div className={subVertical}>
</div>
)}
</VerticalContext.Consumer>
)
}
}
const Statistics: React.FC = () => {
const { pathname} = useContext(VerticalContext)
return (
<div className={subVertical}>
</div>
)
}
class Statistics extends React.Component {
render() {
return (
<div>
</div>
)
}
}
class component
const Statistics: React.FC = () => {
return (
<div>
</div>
)
}
useContext

functional component 는 다 좋은가?

lifecycle feature 수행 방식 비교
(class component vs. functional component)
const CategoryList: React.FC = () => {
const [name, setName] = useState('Mary')
useEffect(() => {
})
return (
<div>
</div>
)
}
class CategoryList extends React.Component {
constructor() {
this.state = {name: ‘Mary’}
}
}
shouldComponentUpdate () {
}
componentDidUpdate() {
}
componentWillUnMount() {
}
render() {
return (
<div>
</div>
)
}
}
class component

class component
- lifecycle feature 는 class method
- React 가 필요할 때 class method 를 호출
- 특정 class method 호출이 다른 method 호출 영향 X

functional component 가 실행될 때마다
const CategoryList: React.FC = () => {
useEffect(() => {
})
return (
<div>
</div>
)
}
functional component 안의
모든 React Hooks 관련 함수들이 실행됨

1. Hooks 실행순서는
모든 render 에서 동일해야 함
- 동일하지 않으면 runtime 잘못 작동

// ------------
// 첫번째 render
// ------------
useEffect(persistForm)
const [surname, setSurname] = useState('Poppins')
useEffect(updateTitle)
// ------------
// 두번째 render
// ------------
useEffect(persistForm)
const [surname, setSurname] = useState(＇Poppins＇)
정상 동작
// 1. 'Mary' 로 name state 초기화
// 2. persistForm 로 render 후에 실행할 effect 추가
// 3. 'Poppins' 로 surName state 초기화
// 4. updateTitle 로 render 후에 실행할 effect 추가
// 1. name state 읽기 (argument 로 ‘Mary’ 는 무시)
// 2. persistForm 로 render 후에 실행할 effect 교체
// 3. surName state 읽기 (argument 로 ‘Poppins’ 는 무시)
// 4. updateTitle 로 render 후에 실행할 effect 교체

// ------------
// 첫번째 render
// ------------
name && useEffect(persistForm)
const [surname, setSurname] = useState('Poppins')
setName(null)
// ------------
// 두번째 render
// ------------
name && useEffect(persistForm)
const [surname, setSurname] = useState(＇Poppins＇)
runtime 시 잘못 작동
// 1. 'Mary' 로 name state 초기화
// 2. persistForm 로 render 후에 실행할 effect 추가
// 3. 'Poppins' 로 surName state 초기화
// 4. updateTitle 로 render 후에 실행할 effect 추가
// 1. name state 읽기 (argument 로 ‘Mary’ 는 무시)
// 2. persistForm 로 render 후에 실행할 effect 교체 (실패)
// 3. 'Poppins' 로 surName state 초기화 (실패)

– eslint 설정
- react-hooks/rules-of-hooks
Help!

useEffect(effect, list of dependencies)
- render 이후에 실행할 effect 를 생성
useEffect(() => {
const handleChange = () => {}
window.addEventListener('orientationchange', handleChange)
return () => {
window.removeEventListener('orientationchange', handleChange)}
}, [])
}

React 는
• 데이터 조회
• 이벤트 핸들러 등록
• DOM 조작
• timer
• logging
작업을 언제 수행해야 할까?

Element 를 브라우저에 그린 이후
(render 이후)

React 는
• 데이터 조회
• 이벤트 핸들러 등록
• DOM 조작
• timer
• Logging
작업을 render 이후 에 수행해야 한다.
main task 인 render 에 포함되지 않음
=>(side) effect 라고 부름

문제!!
functional component 실행해서 render 할 때 마다
useEffect 가 실행
 Effect 가 생성
 render 이후에 effect 가 실행

useEffect(() => {
const handleOrientationChange = () => {}
window.addEventListener('orientationchange', handleOrientationChange)
return () => {
window.removeEventListener('orientationchange', handleOrientationChange)}
})
return (<div></div>)
}
const PhotoVideoList : React.FC => {
useEffect(() => {
const fetchPhotoVideoItems = async () => {}
fetchPhotoVideoItems()
})
return (<div></div>)
}

render 이후
내가 원할 때만 effect 를 실행할 수 있을까?
원할 때만 effect 를 생성

useEffect(effect, list of depedencies)
** list of dependencies
이전 render 의 list of dependencies
현재 render 의 list of dependencies
item 이 다를 때
effect 를 생성

첫번째 render 이후에만 effect 를 실행하고 싶어요!
const handleOrientationChange = () => {}
useEffect(() => {
window.addEventListener('orientationchange', handleOrientationChange)
return () => {
window.removeEventListener('orientationchange', handleOrientationChange) }
}, [])
}
useEffect(() => {}, [])

const PhotoVideoList : React.FC = ({photoVideoReviewIds}) => {
useEffect(() => {
const fetchPhotoVideoItems = async () => { }
}, [photoVideoReviewIds])
}
특정 props, state 가 변경됐을때만 effect 실행하고 싶어요!
useEffect(() => {}, [props1, props2, state1, state2])

list of dependencies 에는 effect 에서 사용하는 모든
props, state 가
포함되어야 함
const Example = ({ someProp, anotherProp }) => {
const fetch = () => {
fetchItem(someProp, anotherProp)
}
useEffect(() => {
fetch()
}, [someProp])
}
list of dependencies 사용 시 주의할 점

– eslint 설정
- react-hooks/exhaustive-deps
Help!

React Hooks 마법
그리고 깔끔한 사용기
• 간결
• 로직 예상이 쉽고,
• 읽기 쉽고,
• 재활용이 쉬운
• Hooks 순서
• useEffect
• Eslint 의 도움을 받자!

못다한
Q & A
• React Context/state 와 Redux 의 차이는 무엇인가?
• React Context/state 로 Redux 를 완벽하게 대체가능한가?

참고) React 에서 Redux 사용 구조

발표 들어주셔서 감사합니다!

React Hooks 마법. 그리고 깔끔한 사용기

More Related Content

What's hot (12)

Similar to React Hooks 마법. 그리고 깔끔한 사용기 (20)

React Hooks 마법. 그리고 깔끔한 사용기