state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
props: 외부에서 변경되는 값- 컴포넌트의 속성(property)을 의미합니다.
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다.
- 객체 형태입니다.
- props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체
state: 내부에서 변경되는 값- 체크박스처럼 변경될 수 있는 값
- React에서는 state 를 다루는 방법 중 하나로
useState라는 특별한 함수를 제공합니다
React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
-
useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같다
import { useState } from "react"; -
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); -
React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 됩니다.
React 컴포넌트(React Component)에 props를 전달할 수 있다.
이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
-
React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용합니다.
-
JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달합니다.
-
<button onClick ={handleEvent}>Event</button> -
React state는 상태 변경 함수 호출로 변경해야 합니다. 강제로 변경을 시도하면 안 됩니다. 상태 변경 함수 사용은 React와 개발자의 약속이기 때문에 지켜주셔야 합니다. 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않습니다.
import "./styles.css";
import React, { useState } from "react";
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
};
const handleClick = () => {
alert(name);
};
return (
<div className="App">
<h1>Event handler practice</h1>
<input type="text" value={name} onChange={handleChange}></input>
<button onClick={handleClick}>Button</button>
{/* <button onClick={() => alert(name)}>Button</button> */}
<h3>{name}</h3>
</div>
);
}
export default NameForm;실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
- react는 위에서 아래로 내려간다.(부모와 자식 무조건 지어라) 서로 연관된 컴포넌트이면 무조건 부모컴포턴트를 만들자!!
Why not?