TIL) Ref

Ref 은 이름표다!

클래스형 컴포넌트에서 만드는 방법

예) this.text = React.createRef(); (=텍스트에 Ref를 만들어 주자)

그러면 타겟인 "text" 가 있는 div옆에 <input type="text" ref={this.text}/>  (적용 끝) 

component DidMount() 로 ref 적용이 잘 되었는지 확인 해 줄 수 있다.

...

    this.state = {
        list: ["영화관 가기", "매일 책읽기", "수영 배우기"]
    };

    this.text = React.createRef();
    }

    componentDidMount() {
        console.log(this.text);
    }
    
    return (
    ...중략...
    
            <div>
                <input type="text" ref={this.text}/>
            </div>
        </div>
    );
    }
    }
...

 

콘솔을 보면 {current: input} 이라고 뜸. console.log(this.text.current.value) 하면 value값을 가져올 수 있음.

하지만 componentDidMount에 console.log(...)가 있어서 input에 작성해도 console에 안찍힘.

render()밑에 콘솔로그를 옮겨찍으면 null이 나옴. (=render되었을때 value는 null이었다.)

왜냐면 가상돔에만 올라가있고 진짜DOM에는 안올라와있어서. 

onChange={()=>{        

console.log(this.text.current.value)}};  를 input에 넣어주고 확인 할 수 있다. 

 

함수형 컴포넌트에서 Ref 만들기 : React Hook을 사용

useRef라는 훅을 사용해줌. 

 

이벤트리스너 : 사용자가 어떤 행동(=이벤트)을 하는 지 아닌지 지켜보다가 알려주는 것.

                       예를 들어 마우스클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰임.

...

const my_lists = list;
const my_wrap = React.useRef(null);

console.log(my_wrap)
return (
    < div ref={my_wrap} >
    {my_lists / map((list, index) = > {
return <ItemStyle key = {index} > {list} </ItemStyle>;
})}
}
)

...

React.useRef(초기값) >>>  console.log(my_wrap) 초기값이 null이기때문에 콘솔창에서 null 뜸. return후에 나온 my_wrap을 확인하고 싶으면

window.setTimeout() => {                

console.log(my_wrap)

}, 1000); 을 return 전 줄에 넣어줌.      //1 초 있다가 {} 안에 있는 내용을 실행해! 1초 사이에 return이 일어나서 console에 div가 뜸