인스타그램 react 클론을 진행하던 중, 댓글 창의 게시 버튼을 눌렀을 때
input
의 value 값 초기화 및focusing
풀림 방지 기능이 필요했다. 하지만button
태그에서 형제 DOM 노드로 접근하기 위해서는 props가 아닌 다른 방법이 필요했다. 때문에 공식문서를 검색하던 중Ref
를 알게 되었으며 이를 간단하게 정리해보고자 한다.
render
메소드에서 생성된 DOM노드
에 접근할 수 있는 방법이며 React 16.3 이후에 추가된 API이다.
특정한 DOM노드, 혹은 컴포넌트에 reference
를 지정하여 해당 값을 얻거나 수정할 수 있다.
- class
class Feed extends React.Component { constructor(props) { super(props); this.inputLocation = React.createRef(); } addComment = () => { console.log(inputLocation) }
- rendering tag
render() { return ( <> <input ref={this.inputLocation} / > <button onClick={this.addComment}></button> </button>
this.name = React.createRef()
를 통해 생성이 가능하며 current
속성을 갖는 특정 객체를 통해 접근이 가능하다.
✔ 실제로 확인해보니 바닐라JS에서 쿼리 셀렉터를 통해 DOM 노드에 접근했던 것처럼, current를 통해 접근할 수 있었다.
addComment = () => { const { commentList, inputValue } = this.state; this.setState( { inputValue: "", commentList: commentList.concat({ id: commentList.length + 1, name: "yongmin", comment: inputValue, }), }, () => { this.setState({ buttonColor: false }); this.inputLocation.current.value = ""; //addComment()가 실행될 때 input값을 공백화 this.inputLocation.current.focus(); // 코멘트가 달린 후에도 지속적으로 focus 유지됨 } ); };
react
를 포함한 모던 자바스크립트 라이브러리에서는 반드시 필요한 경우가 아니고선 사용을 지양하는게 좋다고 한다.
- 명령형 프로그래밍: 코드로 원하는 결과를 달성해 나가는 과정에만 관심을 두는 프로그래밍, 즉 어떠한 과정을 거칠 지 구체적인 과정을 하나하나 나열한다. (결과물보다는 과정이 중요)
- 선언형 프로그래밍: 필요한 과정을 하나하나 나열하기 보다는, 어떤 결과물을 원하는지에 집중되어있다. 즉, 어떻게가 아닌, 무엇이 이루어지는지에 대해 초점이 맞춰져있다.
👍🏻👍🏻👍🏻👍🏻👍🏻