State
애플리케이션의 '상태' 로 쇼핑몰 장바구니속 물건들의 체크박스 체크 여부에따라 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면이 달라지는 것처럼 컴포넌트 내부에서 변할 수 있는 값이다.
React의 Event handling
React의 이벤트 처리 방식은 DOM의 이벤트 처리 방식과 유사하지만 몇 가지 문법차이가 있다.
- React에서 이벤트는 카멜케이스(carmelCase)를 사용합니다.
- JSX를 사용하여 함수로 이벤트 처리 함수(Event handler)를 전달한다.
HTML에서의 Event handling)
<button onclick="handleEvent()">Event</button>
React에서의 Event handling)
<button onClick={handleEvent}>Event</button>onChange
<input>``<textarea>``<select>와 같은 폼(form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다. onChange는 이러한 사용자의 입력값이 바뀔 때마다 발생하는 이벤트이다. input을 예시로 코드를 짜보자면 아래와 같다.
input onChange 예시)
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
<h1>{name}</h1>
</div>
)
};- 컴포넌트 return문 안의
input태그에value와onChange를 넣어input의 텍스트가 바뀔시onChange이벤트가 발생하고handleChange함수가 작동한다. 이때 이벤트객체에 담긴input값을setState(e.target.value)를 통해 새로운state로 갱신한다.
onClick
onClick 이벤트는 사용자가 클릭 하였을 때 발생하는 이벤트이다. 버튼이나 <a> tag를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 사용하는 이벤트이다. 위의 input onChange 예시에 버튼을 추가해 예시로 코드를 짜보자면 아래와 같다.
input onChange onClick 예시)
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
<button onClick={alert(name)}>Button</button>
<h1>{name}</h1>
</div>
);
};inputtag에 입력한 이름이alert을 통해 알림창에 팝업되도록 만든 이 예시 코드는onClick이벤트에alert(name)함수를 바로 호출시 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가onClick에 적용된다. 때문에 버튼을 클릭할 때가 아닌 컴포넌트가 렌더링 될 때에alert이 실행되고, 그 결과인undefined가onClick에 적용되어 버튼을 클릭했을 때 아무런 결과도 일어나지 않게된다. 그렇기에onClick이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의후 이벤트 함수 자체에 전달해야한다.
리턴문 안에서 함수를 정의한 예시)
return (
<div>
...
<button onClick = {() => alert(name)}>Button</button>
...
</div>
);
};
리턴문 외부에서 정의한 함수 자체를 전달하기)
const handleClick = () => {
alert(name);
};
return (
<div>
...
<button onClick={handleClick}>Button</button>
...
</div>
);
};React hook
React 공식문서 Hook
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
React에서 Hook이란, 함수형 컴포넌트에서 사용되는, state와 관련된 기술들을 모아서 일컫는 말 이다. 대표적으로는 State Hook: useState()와 Effect Hook: useEffect()가 있는데 이중 useState()의 사용법에 대해 알아보자
State Hook
useState 사용법
React Hook에서는 state를 다루는 방법 중 하나로 useState라는 함수를 제공한다.
useState 불러오기
useState를 이용하기 위해선 React로부터 import 키워드를 사용해useState를 불러와야한다.
import { useState } from "react"useState 호출하기
useState를 컴포넌트 안에서 호출해주어야한다. "state"라는 변수를 선언하는 것과 같으며 변수의 이름은 아무 이름이어도 상관없다. 일반적인 변수는 함수가 끝날 때 사라지지만 state변수는 React에 의해 함수가 끝나도 사라지지 않는다.
useState 문법 예시)
function CheckboxExample() {
// 새로운 state 변수를 선언하고, 이것을 isChecked 라고 지정
const [isChecked, setIsChecked] = useState(false);
}isChecked,setIsChecked는useState의 리턴값을 구조 분해 할당한 변수다.
이를 풀어쓰면 아래 코드와 같다.
useState 구조분해할당 예시)
const [isChecked, setIsChecked] = useState(false);
// ...
const stateHookArray = useState(false);
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1];useState를 호출시 배열을 반환하며 배열의 0번째 요소는 현재 state변수, 1번째 요소는 이 변수를 갱신할 수 있는 함수다.useState의 인자로 넘겨주는 값은 state의 초깃값이다.
useState 문법 예시)
function CheckboxExample() {
// const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
const [isChecked, setIsChecked] = useState(false);
//isChecked : state를 저장하는 변수
//setIsChecked : state isChecked 를 변경하는 함수
//useState : state hook
//false : state 초깃값- 이 state 변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러서 사용해야하는데 예시 코드에서는 isChecked가 boolean값을 가지기 때문에 삼항연산자를 사용해야한다.
JSX에서 삼항연산자 사용 예시)
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>State 갱신하기
state를 갱신하려면 state 갱신함수를 호출해야한다.
예시 코드를 살펴보자면 setIsChecked가 state 갱신함수가 된다.
또한 input[type=checkbox] JSX 엘리먼트의 값 변경에 따라 isChecked가 변경되게 해야한다. 브라우저에서 checked로 값이 변경시 React에서 isChecked 값도 같이 변경되어야한다는 소리다.
input[type=checkbox] 엘리먼트 값이 변경될시 onChange 이벤트가 발생, 이벤트 핸들러 함수가 작동되고 해당 함수는 setIscheked를 호출해 그 결과에 따라 isChecked 변수가 갱신, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 한다.
CheckboxExample 컴포넌트의 완성된 예시)
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}
State hook 사용시 주의점
React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링 된다. 이때 state는 상태 변경 함수 호출로 변경해야한다. 강제로 변경 시도시 리렌더링이 되지 않는다거나 state가 제대로 변경되지 않을 수 있다.
