Front-End/React

React 이벤트 리스너(핸들러)

코드깎는머슴 2024. 8. 30. 19:45
728x90
반응형

React 이벤트 리스너(핸들러)

 

 

 

먼저 이 장에 앞서, 코드로 이것저것 하다 보면 터미널에 노란 글씨로 `warning`이라고 나오는 경우가 있다.

이 것은 에러는 아니고, 잘못된 코딩 습관을 잡아주는 `eslint`라는 라이브러리다.

만약 사용하기 싫다면 /* eslint-disable */ 를 사용하면 된다.

/* eslint-disable */

 

이제 이벤트 함수 사용하는 법을 알아보자

 

 

1. 버튼 생성

어제의 코드를 이렇게 수정하자.

<div className="list">
    <h3>{글제목[0]} <span>👍</span> 1 </h3>
    <p>8월 20일자</p>
    <hr/>
</div>

 

화면 상으로는 다음과 같다.

 

 

2. 이벤트 함수 사용

이벤트를 사용할 때, 기존 js의 경우 아래와 같이 코딩했다.

<h3>{글제목[0]} <span onClick="">👍</span> 1 </h3>

 

하지만 리액트의 경우 쌍따옴표가 아닌 중괄호를 이용하고, 내부엔 함수가 들어가야 한다.

아래와 같은 경우는 안된다.

<h3>{글제목[0]} <span onClick={1 + 1}>👍</span> 1 </h3>

 

올바른 경우

<h3>{글제목[0]} <span onClick={()=>{ 1 + 1 }}>👍</span> 1 </h3>

 

 

3. 이벤트 함수 활용

3 - 1

그럼 이제 좋아요 버튼을 누를 때마다 값이 올라가도록 해보자

코드는 다음과 같다.

let [글제목, 글제목변경] = useState(['8월 20일 노트', '8월 21일 노트', '8월 22일 노트']);
let [좋아요, 좋아요변경] = useState(0);
let lists = '학습 목록';

return (
    <div className="App">
        <div className="skyblue">
            <div style={{color: 'blue', fontSize: '30px'}}>공부 Blog</div>
        </div>
        <div className="list">
            <h3>{글제목[0]} <span onClick={()=>{ 좋아요 + 1 }}>👍</span> {좋아요} </h3>
            <p>8월 20일자</p>
            <hr/>
        </div>

이 코드를 사용해보면 작동이 안된다.

뭔가 잘못한 것이다.

state는 기본적으로 그냥 변경할 수 없다.

state 장에서 설명했듯이, useState()로 선언하면 해당 데이터를 변경하기 위한 함수도 같이 제공된다.

 

사용해보자.

<h3>{글제목[0]} <span onClick={()=>{ 좋아요변경(좋아요 + 1); }}>👍</span> {좋아요} </h3>

이렇게 적으면 해결된다.

 

 

3 - 2

그럼 이제 버튼을 눌렀을 때 제목이 변경되게 해보자.

function 노트수정() {
    글제목변경(['8월 10일 노트', '8월 21일 노트', '8월 22일 노트']);
}
<button onClick={ 노트변경 }></button>

이렇게도 가능하지만, 이건 너무 하드 코딩 방식이다.

 

다음 방식을 보자.

function 노트수정() {
    var newArray = 글제목;
    newArray[0] = '8월 10일 노트';
    글제목변경( newArray );
}

이 방식은 원본을 복사한 다음, 복사본의 값을 변경하고 복사본을 통해 제목을 변경하고 있다.

 

사실 이건 복사라기보다, 공유라고 봐야 한다.

자바의 얕은 복사와 깊은 복사에 대한 지식이 있다면 충분하니 여기서 굳이 설명하지는 않겠다.

궁금하면 자바 공부한 노트를 찾아보자.

 

아무튼 아래처럼 해야 한다.

var newArray = [...글제목];

이렇게 하면 deep copy가 되어서 값 공유가 아닌 복사가 된다.

...도 es6부터 나온 신 문법이다.

... 뒤의 객체에 대괄호든, 중괄호든 제거해달라는 뜻이라고 한다.

 

현재 `글제목`은 배열인데, ...을 통해 대괄호를 제거하고,

다시 []를 통해 배열로 만듦으로써 새로운 배열이 되는 것이다.

리액트에서 모든 state 데이터는 불변하게 이용하는 것이 권장 사항이라 조심해야 된다고 한다.

728x90
반응형