이해는 했지만...

---

Props 공부 상황

일단 props의 사용은 이해를 했다.
props는 객체이다.

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

// 위의 value와 text는 밑에 Child 함수가 갖는 props들이다. 
   해당 중괄호안에 있는 데이터가 props들의 value값이다.

      <Child /> 아래의 컴포넌트를 실행 export가 되면 해당 컴포넌트의 리턴값이 출력된다.
    </div>
  );
}

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

export default Parent;

console.log(props)를 해보면 {text : "I'm the eldest child", value : "aasdasd"} 이렇게 콘솔에 출력된다.

props에서 모르는 점은 이것의 사용방법이다. 어떻게 사용해서 내게 도움이 되게 코드를 짤 수 있는지 아직 잘 모르겠다. 조금 더 많은 과제들을 풀어보고 익숙해지자.

---

state 공부 상황

useState라는 React 내장 함수를 사용해서 state에 데이터를 저장하고 setState()를 사용하여 state를 조작한다.

useState 활용

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

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

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

이런 버튼을 만들어서 체크박스를 누르면 Unchecked 텍스트가 Checked로 변하게 해보자.

버튼을 누르게되면 먼저 input의 onChange 이벤트가 이벤트 핸들러인 handleChecked 함수를 호출한다. 그리고 handleChecked 함수는 setIsChecked 함수를 호출하고, 그 결과 isChecked 변수 값이 갱신이 된다. 그리고 그 값을 CheckboxExample 함수로 넘겨 true값을 반환한 checkboxExample 컴포넌트가 다시 랜더링 된다.

모든 데이터를 상태로 둘 필요는 없습니다. 사실 상태는 최소화하는 것이 가장 좋습니다. 상태가 많아질수록 애플리케이션은 복잡해집니다. 어떤 데이터를 상태로 두어야 하는지 여부는 다음 세 가지 질문을 통해 판단해보세요.

• 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
• 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

개선사항

---

이해는 했지만 막상 과제 진행 중에는 막히는 부분이 많았다. 아직 부족하다는 거다. 조금 더 많은 쓰임을 보고 props와 setState의 맥락을 파악해보자.