리액트 Props & State

Props의 특징

• 컴포넌트의 속성을 의미한다.
• 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값이다.
• 부모 컴포넌트로부터 전달받은 값이다.
• 객체의 형태이다.
• 읽기 전용이다.

Props의 사용방법

import "./styles.css";

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn text = {itemOne} />
	  <Learn text = {itemTwo} />
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn">{props.text}</div>;
};

export default App;

State란

• 컴포넌트 내부에서 변할 수 있는 값
• 예를들어 쇼핑몰 장바구니의 체크박스, 구매에따라 체크하여 구분

useState 사용법

• useState를 이용하기 위해서는 React로부터 useState를 불러와야 한다.
• import 키워드로 useState 를 불러온다.

import { useState } from "react";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초기값);
  
  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
} //사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 된다.

오늘의 감정

오늘은 트윗에 props와 state를 적용하는 페어과제가 있었다.
페어님이 우분투를 사용해서 실행이 매우 느리다고 먼저 말씀하시고 페어과제를 시작했다.
생각보다 진행이 매우 느려서 안타까웠다.

npm run test도 작동이 안됐다. 페어과제를 경험한 이후 최악의 상황이었지만 그래도 우선 내 화면 위주로 공유해서 해결하려고 노력했다. 페어과제가 내일까지 지속되기 때문에 시간이 꽤 있어서 다행이다.

오늘은 동기와의 딥토크 세션이 있었다. 과제덕에 꽤나 우울한 하루였지만 딥토크에서 동기들과 소그룹으로 이야기하는 시간덕에 다시 동기부여가 됐다. 코드스테이츠는 중간중간 타이밍 맞게 당근을 잘 주는 것 같다. 다시 마음잡고 화이팅🔥