onClick 이벤트와 parameter

1. inline으로 표현

<button onClick={ ( ) => { 실행코드 } }> Click </button>

- 간단한 코드일 경우 효과적이지만 코드의 길이가 길어질수록 가독성이 좋지 않다.

 

2. 함수 표현식

const handleClick = ( ) => { 실행코드 }

 

    2-1. <button onClick={ ( ) => { handleClick( ) } }> Click </button> **인자가 필요할 경우 코드블럭(화살표함수)를 깜싸야한다.

    2-2. <button onClick={ handleClick }> Click </button>

    2-3. <button onClick={ handleClick( param ) }> Click </button> **render되면서 즉시 실행(함수를 호출하는 방식)

 

3. 이벤트 객체를 인자로 사용할때

const handleClick = ( e ) => { 실행코드 }

 e.target.value로 "데이터"에 접근 가능

 

    3-1. <button value={"데이터"} onClick={ e  => { handleClick( e ) } }> Click </button> (2-1번과 같음)

    3-2. <button value={"데이터"} onClick={ handleClick }> Click </button> **syntax sugar (2-2번과 같음)

 

 

4. 일반인자 & 이벤트 객체

const handleClick = ( 일반인자, e ) => { 실행코드 }

const handleClick = ( 일반인자 ) = > ( e ) => { 실행코드 } **함수커링

 

    4-1. <button value={"데이터"} onClick={ e  => handleClick( 일반인자 ) }> Click </button>

    4-2. <button value={"데이터"} onClick={ e  => handleClick( 일반인자 )( e ) }> Click </button>

 

함수커링 : 함수 호출 시 여러 개의 인자를 한 번에 넘기지 않고, 한 번에 하나의 인자를 넘기고, 함수를 인자의 개수만큼 호출하는 방식 (참고)

키워드: 일급 객체, 클로져, 렉시컬 스코프, 스코프 체인

function 함수1 ( ) {

    let val = "value1";

    function 함수2 ( ) {

        console.log( val ) // value1 출력

    }

}