forwardRef 사용법

 

Header에서 메뉴를 눌렀을때

화면에서 해당 위치로 scroll이동을 하려고 했다.

 

Main.jsx에서

Header와

여러 component를 import해서 사용했다.

import Header
import Test1
import Test2
import Test3

<Main>
    <Header/>
    <Test1/>
    <Test2/>
    <Test3/>
</Main>

이런식으로 화면이 구성된다.

 

Header에 props와 ref를 넘겨주면 될거라고 간단히 생각했으나

Header에 ref를 넘겨주는것이 아니였음!

---

Main.jsx에서

컴포넌트에 해당되는ref를 생성해준다.

초기값은 null 이다.

import Header
import Test1
import Test2
import Test3


const test1Ref = useRef(null);
const test2Ref = useRef(null);
const test3Ref = useRef(null);

<Main>
    <Header/>
    <Test1/>
    <Test2/>
    <Test3/>
</Main>

 

이런식으로!

 

그리고 필요한 함수들은 

부모컴포넌트에서 만들어준다

 

import Header
import Test1
import Test2
import Test3


const test1Ref = useRef(null);
const test2Ref = useRef(null);
const test3Ref = useRef(null);

const scrollToTest1 = () => {
 test1Ref.current.scrollToIntoView();
}

const scrollToTest2 = () => {
 test2Ref.current.scrollToIntoView();
}

const scrollToTest3 = () => {
 test3Ref.current.scrollToIntoView();
}


<Main>
    <Header/>
    <Test1/>
    <Test2/>
    <Test3/>
</Main>

 

그리고 만들어준 함수들은 Header 컴포넌트에 props로 넘겨준다.

<Header
	scrollToTest1 = {scrollToTest1}
 	 scrollToTest2 = {scrollToTest2}
      scrollToTest3 = {scrollToTest3}
 />

 

메인에서 이동해줄 컴포넌트들은 이렇게 ref를 연결해준다.

<Test1 ref={test1Ref}/>
<Test2 ref={test2Ref}/>
<Test3 ref={test3Ref}/>

 

이때 Header에서는 props를 받아와 해당 함수가 필요한 곳에 할당시켜준다.

const Header = (props) =>{

<button1 onClick={props.scrollTest1}> </button1>
<button2 onClick={props.scrollTest2}> </button2>
<button3 onClick={props.scrollTest3}> </button3>
}

 

메인에 있는 ref가 할당된 해당 컴포넌트로 가서 이렇게 ref를 뿌려주면 된다!

const Test1 = forwardRef((props,ref) => {

	<container ref={ref}> </container>

});

 

부모 컴포넌트에서 생성된 null값이 할당된 ref는

하위 컴포넌트에서 forwardRef로 감싸주면 받아올 수 있고

container에 ref를 할당해주면 

메인에있는 컴포넌트에 다시 할당이 된다.

부모 const testref=useRef(null); 생성  => <Main> <Test ref={testRef}></Main> 할당=>

하위컴포넌트인 <Test><container ref={testRef}/> </Test> container에 ref로 할당

 

Header에 넘겨준 props는 props.함수 가 동작하면서 메인으로 넘어오게 됨

메인에서 함수가 동작하면서 ref가 할당된 .current로 이동하게 된다.

이때 current는 필수!

 

너무 나만 이해되게 썼나

쨌든..해결!