34일차 - 리액트x부트스트랩 js (3) onClick

밀레·2022년 11월 10일

코딩공부

목록 보기

92/135

<일반 함수 선언 =메서드 "어떻게 처리해줄까?" >

  function millet( ){
		/////
  }

선언적 함수 - 위치에 상관없이, 어디에 써도 먼저 브라우저가 번역함
독립된 함수 & 이름 있다 ('millet', 그러므로 중복될 수 없음!)
+) 콜백함수 <-> 이름없는 함수(=즉각 실행한다! 이름조차 필요없음!)
대소문자 구분함

<생성자 함수 =클래스 "니가 가서 일해!" >

  <!-- 생성자함수(붕어빵 틀에 찍어 자식만 낳는 놈) -->
  function Funobj(){ 
      복사하는 실행문만 있음
  }
  
<!-- 나랑 똑같은 애기를 낳은 다음, 이놈을 움직이게 한다. "니가 가서 일해!" -->
var funbaby0 = new Funobj( );
var funbaby1 = new Funobj( );
var funbaby2 = new Funobj( );
var funbaby3 = new Funobj( ); <!-- 여러개를 낳고, 다 가서 일하라고 시킴! -->

대문자로 시작하는 함수
붕어빵 틀에 찍어 자식만 낳는 놈

함수 선언문과 실행식

<script>

  function millet( ){ // 함수 선언
     document.body.classList = 'action'; // = 지우고 들어감 remove+add 동시실행
     document.body.classList += 'action'; // += 추가로 들어감
  }

  millet( ); // 실행식 "실행!"
  
</script>

Quiz) "#btn 객체를 클릭하면 millet 함수를 실행해라"

<script>

  function millet( ){			 // 저장한다   // 함수선언
     document.getElementById('btn').onClick = function(){
     
      	bby( );  
  }
  
</script>

더 전문적인 표현 addListener

<script>
                               // 여러가지 이벤트 동시에 진행가능!
  document.getElementById('btn').addListener( 'click popup hover', function(){ millet(); })
  																			 //구체적인외부함수
  
</script>

제이쿼리로 표현해보자

<script>

  $('#btn').click = function(){ // 선언식!
      millet( );
  }

  $('#btn').click( ); // 실행식! (종속 함수, 선언식보다 아래에 있어야!)

</script>

추가 Quiz) "두번째 버튼 클릭할 때만 실행"
첫번

<script>

  $('.btn').click = function(){ // 선언식
      millet( );
  }

  $('.btn').eq(1).click( ); // "두번째 버튼 클릭할 때만 실행"
  
</script>

2. 리액트 상단 Hd.js 계속 작업

2-1. onClick = { }과 연결할 함수 선언

2-2. 매개인자를 갖는 함수

두가지 방법으로 쓸 수 있음

<script>

<button className="darkVer" onClick={ function(){ colorActive('darkmode') }} >검정</button>
<button className="lightVer" onClick={ () => { colorActive('lightmode') } } >하양</button>

</script>