Props와 State
Props
컴포넌트 생성
const Welcom = (props) => {
return <h1>Hello, {props.name}</h1>;
}컴포넌트 사용
const App = () => {
return <div>
<Welcome name="수영" />
<Welcome name="민수" />
<Welcome name="영희" />
</div>;
}사용되는 값들을 바꿔가며 출력할 수 있다
기본적으로 component에 원하는 값을 넘겨줄 때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 Javascript의 요소라면 제한이 없다.
주로 component의 '재사용'을 위하여 사용한다.
props는 읽기 전용이다.
State
state는 component 내에서 유동적으로 변할 수 있는 값을 저장한다.
개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
state 값이 변경되고 재렌더링이 필요한 경우에 react가 자동으로 계산하여 변경된 부분을 렌더링한다
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>버튼을 {count}번 눌렀습니다.</p>
<button onClick={() => setCount(count + 1)}>
클릭
</button>
</div>
);
}-
state 값을 직접 변경하게 되면 리액트가 component를 다시 렌더링할 타이밍을 알아차리지 못한다.
반드시 setState 함수를 이용해 값을 변경한다.
setState 함수를 호출할 때 리액트에게 "다시 렌더링 해달라"라는 명령이 내려진다. -
setState 함수에는 변경할 값을 직접 넣는 방법이 있고, 함수를 넣는 방법이 있다.
함수를 넣는 경우 함수가 반환(return)하는 값으로 state가 변경된다.
현재 값을 기반으로 state를 변경하고자 하는 경우함수를 넣는 방법을 권장한다.
이벤트 처리
이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
유저의 행동에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있다.
이렇게 발생된 이벤트를 자바스크립트를 이용해 대응할 수 있다.
Element가 로딩되었을 때, 사용자가 Element를 클릭했을 때, 마우스를 올렸을 때, 더블 클릭했을 때, 키보드 입력을 주었을 때 등 다양한 이벤트가 존재한다.
이벤트 핸들러 함수에서는 다양한 로직을 처리하고 그 결과를 사용자에 출력하여 알릴 수도 있다.
리액트에서 이벤트를 처리하는 방법은 크게 두가지 방법이 있다.
별도의 핸들링 함수로 선언하고 Element에 넘겨주는 방법과 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법으로 나뉜다.
-
onClick : Element를 클릭했을 때
-
onChange : Element의 내용이 변경되었을 때 (input의 텍스트를 변경, 파일 선택 등)
-
onKeyDown, onKeyUp, onKeyPress : 키보드 입력이 일어났을 때
-
onDooubleClick :Element를 더블 클릭했을 때
-
onFocus : Element에 Focus되었을 때
-
onBlur : Element가 Focus를 잃었을 때
-
onSubmit : Form Element에서 submit 했을 때
-
DOM Input 값을 State에 저장하기
event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.
현재 event의 target은 input element이므로 입력된 value를 가져와 setState를 하는 모습이다. -
여러 input 동시에 처리하기
State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 Input을 state로 관리하는 방법이 있다.
target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영한다.
Props vs State
Props와 State의 가장 큰 차이로 Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 자식 컴포넌트에서는 Props를 직접 수정할 수 없지만 State는 컴포넌트 내부에서 선언하며 내부에서 관리되는 값으로 값을 변경할 수 있다는 점이 있다.
따라서 값이 변경되어야하는 상황, 예를 들면 매초 변하는 시간을 출력해야 하거나 버튼 클릭시 값이 변하는 것을 출력해야 한다면 State를 사용해야 한다. 정리하자면 Props는 읽기 전용으로 수정이 불가능하고, State는 원하는 경우 수정이 가능하기 때문에 상황에 따라 알맞은 것을 사용하면 된다.
