728x90 Front-End/React23 [React] 6. 이벤트 처리하기 출처: React 공식 홈페이지 이벤트 처리하기 – React (reactjs.org) 1. React 이벤트 문법 (1) camelCase 사용 (2) 함수로 이벤트 핸들러 전달 예시) **HTML Activate Lasers **React Activate Lasers 2. 기본 이벤트 동작 방지 **HTML 기본 이벤트동작 방지 - return false 사용 Click me **React 기본 이벤트동작 방지 - preventDefault 메서드 사용 > e는 합성이벤트로 그대로 사용하면 된다. 신경쓸 필요 없다.(라고 함) fuction ActionLink(){ function handleClick(e){ e.preventDefault(); console.log('The link was click.. 2021. 2. 1. [React] 5. State와 생명주기 출처: React 공식 홈페이지 State and Lifecycle – React (reactjs.org) 1. 3번째 게시물의 element 예제에서 Clock 컴포넌트를 분리한 것 **전 function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); **후 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tic.. 2021. 2. 1. [React] 4. Component와 Props 출처: React 공식 홈페이지 Components and Props – React (reactjs.org) 0. 컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나눌 수 있다. elements는 화면에서 보게되는 것이다. 보통 컴포넌트들이 모아져서 만들어진다. 변하지 않는다. 컴포넌트는 props를 받아 elements를 출력하는 함수와 같다. 내 생각에 컴포넌트는 데이터를 받아서 HTML을 구성하는 로직이 첨부된 느낌. 엘리먼트는 그 마지막 결과물. 1. 컴포넌트 정의 방법 (1) 가장 간단한 방법 function Welcome(props){ return Hello, {props.name}; } (2) 또는 ES6 문법 class를 이용 class Welcome extends React.Compo.. 2021. 2. 1. [React] 3. Element 출처: React 공식 홈페이지 엘리먼트 렌더링 – React (reactjs.org) 1. 엘리먼트(Element) > 엘리먼트는 React 앱의 가장 작은 단위. 컴포넌트의 구성요소 const element = Hello, world; 2. react 엘리먼트를 노드(태그)에 전달하는 방법 > ReactDOM.render const element = Hello, world; ReactDOM.render(element, document. getElementById('root')); 3. 엘리먼트 업데이트 방법 - 한번 생성된 element는 불편의 객체이다 - 업데이트하는 방법은 element를 다시 노드(태그)에 연결하는 방법밖에 없다. Ex) 아래는 1초마다 다시 ReactDOM.render 를 해.. 2021. 2. 1. 이전 1 2 3 4 5 6 다음 728x90