[React] 이벤트와 state

6. 이벤트

https://youtu.be/s3cDPbcoy_4

이벤트를 통해 사용자의 행동에 따라 변화를 나타낼 수 있다.

onClick에 따른 이벤트 함수를 이용한 App.js

우선 사용할 컴포넌트(사용자 정의 태그)에 onChangeMode={function(){..}} 이라는 함수를 하나 정의한다. 해당 함수도 역시 props로, 함수를 작성할 때는 중괄호 {}를 통해 작성한다.

태그 정의 함수에서 이벤트를 정의하기 위해서는 html와 같은 onClick 이벤트 속성을 작성해준다. 단, html와 다른 문법을 따르므로, onClick은 대소문자를 확실히 적고 내용은 중괄호 {function(event){..}}를 통해 적는다. 단, event함수는 event객체를 파라미터로 사용한다.

props이기 때문에, 사용하기 위해서 props.onChangeMode()로 접근한다.

함수fucntion(){} 은 ()=>{}로 축약 가능하다.

매개변수(파라미터)가 있는 이벤트 함수를 정의한 App.js

 

KeyWord

컴포넌트 안에 함수 작성

함수에서 props처럼 사용

함수에서 이벤트 함수 (event) 매개변수

 

7. state

https://youtu.be/vmunrKR0uOU

prop과 state 모두 변경 시에 컴포넌트의 새로운 return값을 나타내준다.

단, prop은 컴포넌트 외부를 위한 데이터이고, state는 컴포넌트를 만드는 내부를 위한 데이터다.

mode 변수의 기본적인 내부 변수 값 변화

기본적으로 내부 변수의 값이 바뀐다고해서 컴포넌트(함수)가 재실행되지는 않는다. 이 문제를 해결하게 위해 useState를 이용한다.

import {useState} from 'react';
// react의 기본 내장 라이브러리인 {useState}를 이용한다.

useState()를 통한 내부 변수 선언

useState()를 통해 선언된 객체는 배열이다.

useState(값)으로 state 객체를 정의하며, 배열[0]에는 값이, [1]에는 값을 변경하는 set함수로 구성된다.

useState를 통한 state를 구현한 App.js

클릭한 topics에 따라 content를 변화하려고 해본 App.js

하지만 이는 정상작동하지 않는다. 이는 setId를 통해 설정된 id가 문자열이기 때문이다. 정확히는 태그의 속성값을 불러오면 그 값은 문자열이 된다.

Number()를 이용한 캐스팅.

그러므로 Number()함수 등을 써서 캐스팅하여 이용하자.

 

KeyWord

useState : 내부 변수 변화시 재실행

const [값, 함수] = useState(값)

태그 속성값은 문자열