TIL - 57

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는 위에서 아래로 내려간다.(부모와 자식 무조건 지어라) 서로 연관된 컴포넌트이면 무조건 부모컴포턴트를 만들자!!