패스트캠퍼스 챌린지 26일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online

 

 챌린지 26일 차. 리액트 강의를 수강함과 동시에 리액트를 사용하여 유튜브를 클론 코딩하는 프로젝트를 진행 중에 있는데 두가지를 같이 진행하니까 리액트의 구조와 사용법에 어느정도 이해가 되어가고 있다. 처음 배울 땐 좀 어려워서 잘 사용할 수 있겠느냐는 생각이 많이 들었었는데 역시 차근하게 진행해나가니까 차근차근 풀려나가는 느낌이 든다. 아직은 자바스크립트가 더 익숙해서 리액트 프로젝트를 진행할 때에 막히는 부분에선 자바스크립트로는 이렇게 호로록 해버리면 되는데 라는 생각이 자꾸 든다.. 오늘은 리액트 이벤트리스너에 대한 정리를 간단하게 해보았다. 

 

React Event Handling

 

 HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야한다. 

 

class Commp extends React.Component {
	render() {
    	return (
        	<div>
            	<button onClick = {( ) => {
                	console.log("clicked!");
                }}>클릭</button>
            </div>
        );
    }
}

 

 1. camelCase로만 사용할 수 있다.

· Ex) onClick, onMouseEnter

 

 2. 이벤트에 연결된 자바스크립트 코드는 함수이다.

· 이벤트 = { 함수 } 와 같이 작성한다.

 

 3. 실제 DOM 요소들에만 사용 가능하다.

· 리액트 컴포넌트에 사용하면 그냥 Props로 전달한다.

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.


#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online