1. useRef() 사용하기 React는 Virtual DOM을 사용해 요소를 한꺼번에 렌더링하므로 DOM을 직접 조작할 때보다 속도가 빠르지만, 요소 focus, 미디어 조작, 애니메이션 적용 등 DOM 요소의 주소값을 활용해야 하는 경우 DOM을 조작할 수밖에 없음. 그럴 때 사용 가능한 Hook이 useRef(). A. 특정 DOM 요소 선택하기 javascript에서 DOM 요소를 선택하기 위해 Element.querySelector(), Element.getElementById()같은 메서드를 사용하는데 React에서도 동일한 개념으로 ref라는 것을 사용함. function App() { const checkBox = useRef(null); // ... return ( ); }; useRe..
JavaScript/React 2022. 7. 1. 18:15
1. useRef() 사용하기 React는 Virtual DOM을 사용해 요소를 한꺼번에 렌더링하므로 DOM을 직접 조작할 때보다 속도가 빠르지만, 요소 focus, 미디어 조작, 애니메이션 적용 등 DOM 요소의 주소값을 활용해야 하는 경우 DOM을 조작할 수밖에 없음. 그럴 때 사용 가능한 Hook이 useRef(). A. 특정 DOM 요소 선택하기 javascript에서 DOM 요소를 선택하기 위해 Element.querySelector(), Element.getElementById()같은 메서드를 사용하는데 React에서도 동일한 개념으로 ref라는 것을 사용함. function App() { const checkBox = useRef(null); // ... return ( ); }; useRe..
JavaScript/React 2022. 5. 23. 20:04
1. 함수형 컴포넌트 vs. 클래스형 컴포넌트 /* 1. Welcome 컴포넌트: class 표현 */ class WelcomeC extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function WelcomeF ( {name} ) { return Hello, {name}; } A. Props 값 전달하기 const props = { name: "Sara" } 위와 같은 props를 컴포넌트에 전달하기 위해서는... ① 함수형 컴포넌트 function WelcomeF ( {name} ) { return Hello, {name}; } /* 1. 함수 실행식 이용 */ R..