[Section 2] React State&Props

State

컴포넌트르 사용하는 동안 컴포넌트 내부에서 변할 수 있는 값

Props

컴포넌트의 속성을 의미,

• 부모(상위) 컴포넌트로부터 전달받은 값
• 어떤 타입의 값도 넣어 전달할 수 있도록 객체형태
• 읽기 전용 변결될 수 없음

Props vs State

• Props는 외부로부터 전달받은 값
• State는 내부에서 변화하는 값
  - 컴포넌트 안에서 변화되는 값

Ex)
Props: 이름, 성별..
State: 나이, 거주지, 결혼 유무..

Props 사용

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

다음과 같은 순서로 Props를 사용하고 <Parent>와 <Child>컴포넌트가 사용된다.

function Parent() {
  return (
    <div className="parent">
      <h1>parent</h1>
      <Child />
    </div>
  );
};

function Child() {
  return (
    <div className="child"></div>
  );
};

React에서 JSX속성 값 할당

<Child attribute={value} />

text속성을 선언해 문자열 할당, <Child>컴포넌트에 전달

<Child text={"I'm the eldest child"} />

<Parent> 컴포넌트에서 전달한 문자열을 <Child>컴포넌트에서 받는다.

function Child(props) {
  return (
    <div className="child"></div>
  );
};

props 렌더링, dot notation형태로 받는다.

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

---

State

State hook, useState

state를 다루는 방법 중 useState라는 함수가 존재한다.

• useState불러오기

import { useState } from "react";

• useState를 컴포넌트 안에서 호출 === state라는 변수를 선언하는것과 동일

isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  // 동일한 의미
  const stateHookArray = useState(false);
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

useState를 호출하면 배열이 반환된다.
0번째 요소는 현재 state변수이고 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState 의 인자로 넘겨주는 값은 state의 초깃값입니다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

isChecked : state를 저장하는 변수
setIsChecked : state isChecked 를 변경하는 함수
useState : state hook
false : state 초깃값

---

이벤트 처리

onChange

사용자의 입력값을 제어하는데 사용된다. onChange가 발생하면 e.target.value를 통해 input값을 읽어올 수 있다. 이벤트가 발생하면 handleChange함수가 작동하며 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state값으로 갱신한다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

onclick

클릭을 했을 때 발생하는 이벤트