State and Props

벌써 3주차라니...

👩‍💻 배운것

State vs. Prop

• State와 Prop 차이: State는 현 상태 (변경될수있음), Prop은 주어진 컴포넌트의 속성 (외부로부터 전달받은 값)

props

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

• 속성 할당하기: 중괄호 {} 쓰기
• 컴포넌트에 props를 전달

import "./styles.css";

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child />
    </div>
  );
}

function Child(props) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

state

• import React, { useState } from "react"; 

• 이후 컴포넌트 내에서 useState 호출

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

function CheckboxExample() {
  console.log("rerendered?");
  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;

Event Handling

• onChange
  form element에서 사용자의 인풋을 state로 관리
• onClick
  클릭했을때 반응
• select
• Pop up

👫 페어프로그래밍

• 저번주에 했던 트위터에 이제 새로 인풋을 추가할수있는 기능을 만드는거였는데 와! 진짜 어렵다! 어쩐지 스케줄이 내일도 하루종일 잡혀있어서 의아했는데 진짜 그만큼 필요할듯
• 페어님은 민폐가 되지 않으려 미리 해보셨다는데.. 나도 그래야될듯 하다 오늘은 도움밖에 안받았다ㅠ

👍 후기

• 주말에 너무 힘들었어서 오늘 체력적으로 후유증이 있었다,,, 체력관리 해야지

😎 문제해결

• npm run test를 했을때 자꾸 상단에 뜨는데 왜 에러가 뜨지.. 잘되는데.. 해서 뭔가 className에 오류가 있다고 생각하고 있었는데!!!
  

코딩천재님께서 답을 던지고 떠나셨다 !
세상에.. 이렇게 해서 해결이 되었다. 샤라웃 끝

영광의 테스트패스