본문 바로가기
728x90
반응형

Programming/React.js14

4. ref:DOM에 이름 달기 일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용하는데 리액트 프로젝트 내부에서도 ref를 통해 DOM에 이름을 달 수 있다. 리액트 컴포넌트에서 id를 사용하지 않는 이유는 컴포넌트를 반복적으로 사용하기 때문에 중복 id를 가진 dom이 여러 개 생기는 것을 방지하기 위해서이다. ref는 특히 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야 한다. 우선 state로 다음 기능을 구현해보자. - App.js import './App.css'; import ValidationSample from './ValidationSample'; function App() { return }; export default App; - ValidationSample.js import React, { Compo.. 2022. 3. 5.
3. 이벤트 핸들링 Event 사용 시 주의사항 - 이름은 카멜 표기법으로 작성한다 ex ) onClick - 이벤트에 실행할 함수 형태의 값을 전달한다 - DOM 요소에만 이벤트를 설정할 수 있다 ( div, button, input, form, span 의 DOM요소에는 이벤트 설정 가능 / 직접 만든 컴포넌트에는 자체 설정 불가능 ) -- MyComponent에 onClick을 설정하면 함수를 실행하는게 아니라, props를 MyComponent에 실행해준다 -- 그래서 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정한다 -- 이벤트 종류 : Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animatio.. 2022. 3. 5.
2. 컴포넌트 여러 곳에서 한 객체가 반복적으로 사용될 때, component화 한다. Component without Props - App.js import './App.css'; import FirstComponent from './FirstComponent'; function App() { return }; export default App; - FirstComponent.js const FirstComponent = () =>{ return component } export default FirstComponent; 만약 App.js(parent)에서 FirstComponent.js(child)로 변수(props)를 전달한다면 이를 child가 반영하여 parent로 다시 전달해줄 수 있다. Component .. 2022. 3. 4.
1. React 시작하기 일하면서 react.js 를 사용할 기회가 생겼는데 기본적 개념 학습이 필요하다고 생각되어 [리액트를 다루는 기술]과 기타 자료를 통해 학습하고자 한다. - node.js , npm 설치 완료 - vsCode 환경 2022. 3. 4.
728x90
반응형

티스토리툴바