IT/React21 이벤트 처리 이벤트 사용시 주의 사항 이벤트 이름은 카멜 표기법으로 작성 (ex. onclick -> onClick) 이벤트 실항할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 DOM 요소에만 이벤트 설정할 수 있다. 즉, 컴포넌트 자체적으로 이벤트 설정이 불가능 이벤트 종류 Clipboard Composition Keyboard Focus Mouse Selection Touch UI Whell Media Image Animation Transition onChange={e => { console.log(e); }} e 객체는 SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 개체다. 네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 떼와 똑같이.. 2019. 10. 28. state state : 컴포넌트 내부에서 바뀔수 있는 값을 의미. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔주어야 한다. state에는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state 두가지가 있다. 컴포넌트에 state를 설정하기 위해서는 constructor 메서드를 설정 해야 한다. 또한 constructor(생성자) 작성시 super(props)를 반드시 호출 해주어야 한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속하고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준.. 2019. 10. 27. props props : properties를 줄인 표현으로 컴포넌트 속성을 설정시 사용. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능 props 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있습니다. import React from "react"; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name} ; }; export default MyComponent; import React from "react"; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name} ; }; export default MyComponent; 아래와 같이 default props를 설.. 2019. 10. 27. 모듈 내보내기, 불러오기 모듈 내보내기 export default MyComponent; 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정. 모듈 불러오기 import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ; }; export default App; 2019. 10. 27. 이전 1 2 3 4 5 6 다음