728x90 react22 이벤트 헨들링 리엑트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트 인터페이스와 동일하기 때문에 사용법이 비슷하다. 다만 다음과 같은 주의 사항이 존재한다. 1. 이벤트 이름은 카멜 표기법으로 표기한다 2. 이벤트에 실행할 js 코드를 전달하는 것이 아닌 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣었지만 리엑트에서는 함수 형태의 객체를 전달한다 3. DOM요소에만 이벤트를 설정할 수 있다 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 만약 직접 만든 컴포넌트에 onClick={sth}이라는 클릭 이벤트를 설정한다면 이는 이름이 onClick인 props가 된다. 하지만 전달 받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다. 리엑트 이벤.. 2021. 6. 21. state state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고 컴포넌트 자신은 해당 props를 읽기 전용으로 만 사용할 수 있다. props의 값을 바꿀려면 부모 컴포넌트에서 바꾸어야 한다. 리엑트에는 (1). 클래스형 컴포넌트가 지니고 있는 state, (2).함수형 컴포넌트가 지니고 있는 useState를 통해 사용하는 state 총 두개가 있다. Class형 컴포넌트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 import React, {Component} from 'r.. 2021. 6. 20. Component - intro, props 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어 지면 이에 맞추어 UI를 만들로 라이프 사이클 API를 이용해 컴포넌트가 화면에 나타날때, 사라질때, 변화가 일어날때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나뉘어져 있다. 이 둘의 차이점은 클래스형컴포넌트는 state 기능, 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //함수형 컴포넌트 function App() { const name = "react" return ( {name} ); } //클래스형 컴포넌트 import {.. 2021. 6. 19. JSX 1 2 3 4 5 6 7 8 9 10 function App() { return ( Hello react ); } export default App; cs 위 코드는 APP이라는 컴포넌트를 생성한다. function 키워드를 사용해 만든 커포넌트를 함수형 컴포넌트 라고 하며 이를 렌더링 하면 함수에서 반환하고 있는 내용을 나타낸다. 위 코드에서 HTML처럼 생긴 것을 JSX라 한다. JSX는 js의 확장 문법이며 이를 사용해 작성된 코드는 브라우저 에서 실행되기 전에 코드 번들링 과정에서 바벨을 사용해 일반 js형태로 변환 된다. 1 2 3 4 //위 코드를 변환하면 다음과 같이 된다 function App(){ return React.createElement("div", null, "Hello", Re.. 2021. 6. 19. 이전 1 2 3 4 5 6 다음 728x90
