props & state

props는 고정된 속성, state는 유동적인 상태

• props

<Person id="1234" name="sanghun"/>

function Person = (props) => { //props : {id:"1234", name:"sanghun"}
	<div>Name: {props.name}</div> // Name: sanghun
}

• state

//useState라는 함수를 이용해 컨트롤
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);


//예시
function SelectExample() {
  const [selected, setSelected] = useState("마곡");

  const branches = ["마곡", "설입", "양재", "홍대", "마두"];
  const options = branches.map((branch) => {
    return <option value={branch}>{branch}</option>;
  });

  const handleBranch = (event) => {
    setSelected(event.target.value);
  };

  return (
    <div className="App">
      <select onChange={handleBranch}>
        {options}
      </select>
      <h3>오늘은 어디로 갈까? "{selected}"</h3>
    </div>
  );
}

export default SelectExample;