Props 란?

Component에 원하는 값을 넘겨줄 때 사용한다.
변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없고 주로 재사용을 위해 사용한다.

Props의 값을 임의로 변경하면 안 되고, 값을 바꾸고 싶으면 새로운 변수를 생성해야 한다.

안 좋은 예

const Welcome = (props) => {
	props.name = props.name + "님";
    return <h1>{props.name}</h1>;
}

좋은 예

const Welcome = (props) => {
	const username = props.name + "님";
    return <h1>{username}</h1>;
}

Key 란?

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
Key는 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다.

const Names = () => {
	const names = [
    	{key: '1', value: '민수'},
        {key: '2', value: '영희'},
        {key: '3', value: '길동'},
    ]
    return (
    	<div>
  			{names.map((item) => (
  				<li key={item.key}>{item.value}</li>
  			))}
  		</div>
    )
}

State 란?

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장합니다.
개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다.

반드시 setState 함수를 이용해 값을 변경하세요.

State를 사용할 때는 useState를 import 해 줘야 합니다.

import {useState} from 'react';
function Example() {
	const [count, setCount] = useState(0);
    return(
    	<div>
        	<p>버튼을 {count}번 눌렀습니다.</p>
            <button onClick={() => setCount(count + 1)}>
            	클릭
            </button>
        </div>
    );
    }

Object를 갖는 State 주의사항

Object를 값으로 같는 State의 경우 State의 변경을 감지하지 못한다. 그래서 기존 user의 내용을 새로운 object에 담고 값을 변경해 줘야 한다.

const [user, setUser] = 
	useState({name: '민수', grade: 1})
    setUser((current) => {
    	const newUser = {...current}
        newUser.grade = 2
        return newUser
    })

Event 란?

웹 브라우저가 알려주는 사건의 발생을 의미
유저의 행동에 의해서나 개발자가 의도한 로직에 의해 발생할 수도 있다.

요소를 클릭했을 때, 올렸을 때, 더블 클릭했을 때 등 다양한 이벤트가 존재한다.

핸들링 함수 선언

const handleClick = () => {
	alert("클릭했습니다.");
}

익명 함수

<button onClick={() => {alert("클릭했습니다.")}}></button>

많이 쓰이는 DOM 이벤트

onClick: Element를 클릭했을 때
onChange: Element의 내용이 변경되었을 때
onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때
onDoubleClick: Element를 더블 클릭했을 때
onFocus: Element에 Focus 되었을 때
onBlur: Element가 Focus를 잃었을 때
onSubmit: Form Element에서 Submit 했을 때

DOM Input 값을 State에 저장하기

event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.

const [inputValue, setInputValue] = useState("defaultValue");
const handleChange = (event) =>{
	setInputValue(event.target.value);
}

현재 event의 target은 input element이므로 입력된 value를 가져와 setState를 하는 모습

여러 Input 동시에 처리하기

State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 input을 state로 관리하는 방법이 있다.

const [user, setUser] = useState({ name: "길동", school: "대학교"});
const handleChange = (event) => {
	const {name, value} = event.target;
    const newUser = {...user};
    newUser[name] = value;
    setUser(newUser);
}

target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영