이 게시물에서는 구성 요소 트리의 계층 구조에서 한 구성 요소에서 부모로 정보를 올리는 방법을 보여줍니다.

먼저 들어 올리려는 정보가 있는 가장 안쪽 구성 요소 정의부터 시작하겠습니다.

import React,{useState,useEffect} from 'react'
import * as styles from './index.module.css'

const Some=({liftUpInfo})=>{
    const [value,setValue]=useState(false)

    useEffect(()=>{
        liftUpInfo.bind(null,setValue)()
    },[])

    return (
        <div className={styles.general}>
            {value&&'😄'}
            {!value&&'😭'}
        </div>
    )
}

export default Some

보시다시피 props liftUpInfo 함수로 받습니다. 이 기능을 사용하여 정보를 구성 요소의 상위로 효과적으로 들어 올립니다. 이를 위해 useEffect 후크를 사용하여 함수 호출에서 들어 올리려는 값이나 정보를 바인딩합니다.

이제 이liftUpInfo 함수의 정의를 살펴보겠습니다. 이를 위해 부모 구성 요소의 정의를 살펴보겠습니다.

import React,{useRef,useState,useEffect} from 'react'
import Some from '../Some'
import * as styles from './index.module.css'

const Other2=({liftUpInfo})=>{

    const [foo,setFoo]=useState(false)

    const information=useRef(null)

    const catchInfo=(info)=>{
        information.current=info
        setFoo(prev=>!prev)
    }

    useEffect(()=>{
        liftUpInfo.bind(null,information.current)()
    },[])

    return (
        <div className={styles.general}>
        <Some liftUpInfo={catchInfo}/>
        </div>
    )
}

export default Other2

따라서 자식의 liftUpInfo 함수가 prop로 수신된 것을 볼 수 있습니다. 부모에 정의된 catchInfo 함수입니다.

이 함수가 부모에서 하는 일은 참조 값의 값을 업데이트하는 것입니다. 이를 위해 로컬 상태( foo )를 설정하여 구성 요소를 강제로 다시 렌더링합니다. 다시 렌더링한 후 useEffect 후크가 작동하여 정보를 다음 부모에게 전달합니다.

다음 부모에서 우리는 정확히 동일합니다.

import React,{useEffect,useState,useRef} from 'react'
import * as styles from './index.module.css'
import Other2 from '../Other2'

const YetAnother=({liftUpInfo})=>{
    const [foo,setFoo]=useState(false)

    const information=useRef(null)

    const catchInfo=(info)=>{
        information.current=info
        setFoo(prev=>!prev)
    }

    useEffect(()=>{
        liftUpInfo.bind(null,information.current)()
    },[])

    return (
        <div className={styles.general}>
            <Other2 liftUpInfo={catchInfo}/>
        </div>
    )
}

export default YetAnother

이전과 정확히 동일하기 때문에 여기에 언급할 내용이 없습니다.

이제 마지막으로 다음 구성 요소(상위)에서 해제된 정보를 사용합니다.

import React, { useRef,useState } from 'react'
import YetAnother from '../YetAnother'
import * as styles from './index.module.css'

const Any=()=>{
    const [foo,setFoo]=useState(false)

    const information=useRef(null)

    const catchInfo=(info)=>{
        information.current=info
        setFoo(prev=>!prev)
    }

    const clicked=(setValue)=>{
        setValue(prev=>!prev)
    }

    return (
        <div className={styles.general}>
        <YetAnother liftUpInfo={catchInfo}/>
        <button className={'btn btn-primary'}
        onClick={clicked.bind(null,information.current)}>change</button>
        </div>
    )
}

export default Any

이것은 화면의 최종 결과입니다.



이제 가장 바깥쪽 구성 요소에서 정의되고 처리되는 이벤트 핸들러에서 가장 안쪽 구성 요소의 상태를 변경할 수 있습니다.

HOC 사용

상위 구성 요소를 사용하면 동일한 결과를 얻을 수 있습니다. 다음 HOC를 정의해 보겠습니다.

import React, { useState,useRef } from 'react'

export default C=>(props)=>{
    const [foo,setFoo]=useState(false)

    const information=useRef(null)

    const catchInfo=(info)=>{
        information.current=info
        setFoo(prev=>!prev)
    }

    return (
        <C catchInfo={catchInfo} information={information} {...props}/>
    )
}

보시다시피 catchInfo 및 information 소품을 생성하고 나머지 소품과 함께 구성 요소로 전달합니다.

재정의된 나머지 구성 요소와 함께 이 HOC를 사용하는 예를 보여드리겠습니다(동일하게 유지되는 Some 구성 요소 제외).

import React,{useEffect} from 'react'
import * as styles from './index.module.css'
import withLiftUp from '../../hocs/withLiftUp'
import Some from '../Some'

const Other2Bis=({catchInfo,information,liftUpInfo})=>{

    useEffect(()=>{
        liftUpInfo.bind(null,information.current)()
    },[])

    return (
        <div className={styles.general}>
            <Some liftUpInfo={catchInfo}/>
        </div>
    )
}

export default withLiftUp(Other2Bis)

재정의된 나머지 구성 요소는 다음과 같습니다.

import React,{useEffect} from 'react'
import * as styles from './index.module.css'
import withLiftUp from '../../hocs/withLiftUp'
import Other2Bis from '../Other2Bis'

const YetAnotherBis=({catchInfo,information,liftUpInfo})=>{

    useEffect(()=>{
        liftUpInfo.bind(null,information.current)()
    },[])

    return (
        <div className={styles.general}>
            <Other2Bis liftUpInfo={catchInfo}/>
        </div>
    )
}

export default withLiftUp(YetAnotherBis)

이는 이전 것과 정확히 동일하며 마지막으로 다음과 같습니다.

import React from 'react'
import * as styles from './index.module.css'
import withLiftUp from '../../hocs/withLiftUp'
import YetAnotherBis from '../YetAnotherBis'

const AnyBis=({catchInfo,information})=>{

    const clicked=(setValue)=>{
        setValue(prev=>!prev)
    }

    return (
        <div className={styles.general}>
            <YetAnotherBis liftUpInfo={catchInfo}/>
            <button className={'btn btn-primary'}
            onClick={clicked.bind(null,information.current)}>change</button>
        </div>
    )
}

export default withLiftUp(AnyBis)

이것으로 우리는 이전과 같은 결과를 얻습니다.