Unit.6 [React]React State & Props

Props

• props는 외부로 부터 전달받은 값.
• 상위 컴포넌트로부터 넘겨받는다.
• props는 immutable한 데이터이며, 부모에서 자식으로 혹은 구성 요소 자체에서 데이터를 전달하는 데 사용된다.
• 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있다.
• 수ㅏㅇ위 컴포넌트에서 넘ㅇ겨받은 prop

 

State

• state는 내부에서 변화하는 값
• 컴포넌트 내에서만 지지고 볶고 변화한다.
• 변수가 업데이트된다? 신경쓰지않는다.
• state가 업데이트 된다? UI렌더링 한다.
• UI렌더링 하기 좋은 state와 잠시 값을 가지고있기 좋은 변수의 역할을 분리하기 시작했다.
• useState()는 길이 2 짜리 Array를 반환한다. 초기값을 담고있는 State.값과 이 State를 업데이트해주는 set함수를 반환해준
• 다  State의 초기값을 업데이트 해주려면 set함수의 전달인자로 내가 업데이트 하고자 하는 값을 넣는다.
• set함수는 비동기적이다.
• 리액트에서 변수는 찬밥이다. State만 이뻐한다. State는 리액트가 주시하는 값.
• State가 업데이트 될 때 마다 App.js가다시시작 되고 변수는 계속 값이 초기화된다. 그래서 값을 저장하기에 적절하지 못하다!!
• State는  변수처럼 직접 값을 업데이트 해주려고 하면 삐진다. set함수나 useState()를 이용해서 업데이트해주자.
• State는 컴포넌트가 여러개여도 따로 관리된다.

 

---

proprs 실습 코드

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child 키1={"이거전달할건데요1"} />
      <Child 키2={"이거전달할건데요1"} />
      <Child 키3={"이거전달할건데요2"} />
      <Child 키4={"이거전달할건데요3"} />
      <Child />
    </div>
  );
}

function Child(매개변수) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log(매개변수);
  return (
    <div className="child">
      <p>{매개변수.키1}</p>
      <h3>{매개변수.키2}</h3>
      <h2>{매개변수.키3}</h2>
      <h1>{매개변수.키4}</h1>
    </div>
  );
}

export default Parent;

---

proprs 실습결과

상위 컴포넌트에서 내려 준 값의 키가 값이 되고, 하위 컴포넌트의 매개변수가 키가 된다. 위 코드에서는 매개변수.키  이런식으로 받아 올 수있다.

---

 

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

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); // CheckboxExample 의 초기값은 false이다
 // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
  const handleChecked = (event) => {
    setIsChecked(event.target.checked); // handleChecked라는 함수는 set함수를 이용해 이벤트 타겟의 상태를 checked로 업데이트해준다
  };
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span> // State의 상태가 참이면 Checked , false면 Unchecked
    </div>
  );
}

export default CheckboxExample;