📌 State & Props intro

간단히 말하면 props는 외부로부터 전달받은 값 그러면서 잘 변하지 않는 값 그리고 state는 내부에서 변화하는 값! state는 컴포넌트 안에서만 지지고 볶고 변화하는 값!

1) props 특징

• 컴포넌트의 속성(property)을 의미합니다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다.
• 객체 형태입니다.
• props는 읽기 전용

2) props 사용예시

이건 직접 코드로 쓰면서 직접 확인해보는게 더 편하다

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};
function Child() {
  return (
    <div className="child"></div>
  );
};

child컴포넌트와 parent컴포넌트가 선언되었다. 그리고 Parent 컴포넌트 안에 Child 컴포넌트를 작성된것이다. html의 속성을 다루는 것과 비슷하게 5번째 라인을 수정 해주면 된다. 요기서는 text속성을 받은 것이다. 그러면 아래와 같이 작성된다.

<Child text = {"I am the eldest child"}>

앞서 작성된 Child의 속성을 Child 컴포넌트에서 props로 받아야 한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text = {"I am the eldest child"} />
    </div>
  );
};
function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

props로 전달받고 아래는 props.text 로 중괄호에 넣어졌다. 다시 한번 복습하면서 느끼지만 이런건 코드를 직접 써보면서 이해하는게 훨씬 효율적인거 같다.

3) props 또 다른 사용예시

props 를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value 를 넣어 전달하는 것이다. 나는 html을 주로 써와서 그런지 이게 더 익숙할 것 같다.

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};
function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

여는 태그와 닫는 태그사이에 value를 직접 쓰고 그것을 props로 전달하면
{props.children}으로 쓰는 것이다.

---

📌 useState

1) useState 사용법

state를 본격적으로 언급하기 이전에.. React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공한다고 한다. 그러니까 state를 이용하기전에 일단 import에 요거를 작성한다.

import { useState } from "react";

useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
useState문법 예시를 보자

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부른다.
  const [isChecked, setIsChecked] = useState(false);

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

이것의 수도코드도 기억해두도록 한다.

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

이것을 기억해두었더라면 HA react를 더 무난하게 풀었을것을...ㅠㅠ

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부른다.
  const [isChecked, setIsChecked] = useState(false);  

// 위 코드를 풀어쓰면 아래와 같다. 
 const stateHookArray = useState(false);
 const isChecked = stateHookArray[0];
 const setIsChecked = stateHookArray[1];
}

2) state 갱신

사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링. 이건 코드를 보고 밑줄그어가며 과정을 따라가면 이해가 좀더 쉽다.

function CheckboxExample() {
  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>
  );
}