React - 3일차

State , Props

State

• 변할 수 있는 값
• 컴포넌트 내부에서 변할수 있는 값

Props

• 외부로 부터 전달 받은 값
• 변하지 않는 값

---

Props (property)

• 부모 컴포넌트로 부터 전달받은 값
• 객체 형태! -> 어떤 타입의 값도 넣어 전달할수 있기 위해 객체 형태를 가짐
• Props는 읽기 전용
  • 변할수 있게 되면 상위 컴포넌트의 값까지 영향을 미칠수 있게 됨
  • 즉 React 의 단방향 하향식 데이터 흐름이 이루어질수 없음

props 사용하는 순서

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의

   • props = 객체형태이기에 key:value로

2. props 를 이용해서 정의된 값과 속성을 전달

3. 전달받은 props 를 렌더링함

import { idText } from "typescript";

import "./styles.css";

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
      props 로 전달하세요 */}
      {/* <Learn>
        {itemOne} {itemTwo}
        <br />
        {itemOne + " " + itemTwo}
      </Learn> */}

      <Learn item1={itemOne} item2={itemTwo} />
    </div>
  );
};

const Learn = (props) => {
  // return <div className="Learn">{props.children}</div>;
  return (
    <div className="Learn">
      {props.item1}
      {props.item2}
    </div>
  );
};

export default App;

전달하는 방식은 여러가지로 받을수 있음!

---

State

• 애플리케이션의 "상태"
• 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 함

state 를 다루는 방법 1 - useState

useState 사용 >> 전 생애 주기 관리
useState : state hook

• const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); // 구조분해할당
  • const [isChecked, setIsChecked] = useState(false);
• 위에 들어가는 함수는 event 함수로 제어해줌 -> onchange 로 받음

React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링됨!
React state는 상태 변경 함수 호출로 변경해야함

//필수!!!
import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
// 새로운 state 변수를 선언하고 그 이름이 isChecked 임
//구조분해 할당으로 작성
    const [isChecked, setIsChecked] = useState(false);

    const handleChecked = (event) => {
        setIsChecked(event.target.checked);
    };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked}/>
      <span>{isChecked ? "checked" : "unChecked"}</span>
    </div>
  );
}

export default CheckboxExample;

_위 코드처럼 useState 제어 가능