[BEB_07] DAY 9 React State & Props

주말에도 공부를 했어야만! 했지만, 엄마 생신이라 대전을 다녀오는 바람에 간 김에 준이훈이와 동물원 약속도 지키기 위해

주말을 부수느라 내 몸도 부수어져서 책 한번 펴보지 못하고 잤다고 한다... (엄마는 괴로워...)

 

활기차게 새벽 요가를 다녀와서 컴퓨터를 켜고!!!! 조금 보려 했지만 ㅋㅋ

준이훈이 등원 준비로 인해 등원시키고 다시 컴퓨터 앞으로 복귀

오전 타임 솔로로 공부하고 오후부터 페어와 스터디 타임이다.

 

복습은... 못했고 예습을 했다.

오늘 개념은 쉬운 듯 보였으나 아마 쉬운 거 일거다...

막상 내가 코드로 쓰려고 하니 못하는 것 일뿐...

오전도 유튜브로 코딩 강의 시청

 

오후가 되어 페어님한테 디스코드 디엠이 왔다.

구글밋으로 자기소개 간단히 하고 화면 공유하며 공부를 시작했다.

오늘 페어님도 나 알려주느라... 고생하셨습니다.

알려주면서 복습된다고 하셨지만 전 항상 죄인 모드로...ㅎㅎ 그래도 조금씩 실력이 느는 게 느껴집니다.

아주 조금씩...ㅎ이라도 발전이라고 생각하고 열심히 할게요.

 

Props는 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.

props는 읽기 전용입니다.

컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다.

 

React에서 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다.

useState를 이용하기 위해서는 React로부터 useState를 불러와야 합니다.

import 키워드로 useState를 불러옵시다.

 import {useState } from "react";

이후 useState를 컴포넌트 안에서 호출해 줍니다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며,

이 변수의 이름은 아무 이름으로 지어도 됩니다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 

끝나도 사라지지 않습니다.

ex)

function CheckboxExample() {

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

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

 

이벤트 처리 

HTML

<button onclick="handleEvent()"> Event </button>

React

<button onClick={handleEvent}>Event </button>