React 클래스 정보 가져오기 질문 드립니다.
자바스크립트에서는 document.getElementsByClassName("test")[0];
이런씩으로 가져왔는데 리엑트에서는 어떤식으로 가져와야 할지 모르겠습니다.!!
55글자 더 채워주세요.
2개의 답변이 있어요!
사실 리액트에서 클래스 이름으로 접근하는 것은 좋은 방법이 아닙니다.
리액트는 컴포넌트 기반이 라이브러리이고 각 컴포넌트들이 각자 유기적으로 관리되고 만약 한 컴포넌트에서 다른 컴포넌트의 정보를 읽어야 하는 일이 있다면 store 구조로 데이터를 관리해야 하죠.
그래도 DOM에 접근 해야한다고 하시면 가장 적당한 방법은 아래 코드와 같습니다.
해당 컴포넌트 내에서 코드와 같이 ref를 접근하려는 요소에 추가하시고 current로 접근하시면 됩니다.
function CustomTextInput(props) { let textInput = React.createRef(); function handleClick() { console.log(textInput.current); } return ( <div> <input type="text" ref={textInput} /> <input type="button" value="Focus the text input" onClick={handleClick} /> </div> ); }react도 자바스크립트 기반의 프레임워크이기 때문에 document.getElementsByClassName("test")[0] 라는 표현식이 어디에서나 유효합니다. 다만 react는 선언적 프로그래밍을 하는 데 더 유용한 프레임워크입니다. 다른 말로 표현하자면 var myElement = document.getElementsByClassName("test")[0] 라고 할 때, myElement라는 엘리먼트에서 얻고자 하는 속성값을 이 엘리먼트가 초기화될 때 또는 얻고자 하는 속성값이 변경할 때 전역데이터 state에 저장하고, 이 값을 필요로 하는 어딘가에서는 이 state를 모니터링 하며 이 값이 변경될 때마다 자동으로 특정 동작이 일어나도록 구현하는 것이 더 좋습니다.
아래의 링크를 참고해보세요.
