리엑트 2 props && state

State란? 변경 될 수 있는 값으로 예를 들어 쇼핑몰의 물건의 개수 || 구매 금액 등을 예로 들 수 있다.

 

알아야할 사전지식 비구조화 할당 
쓰는 이유: 각 각 변수에 선언하는 대신에 이거를 배열 또는 객체의 모습으로 한 번에 해결 할 수 있음.

const [number, setNumber] = useState(0);

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다.

이 함수를 호출해주면 배열이 반환되는데요,

여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수입니다.

원래는 다음과 같이 해야하지만,

const numberState = useState(0);

const number = numberState[0];

const setNumber = numberState[1];

 

 

 

비구조화 할당 객체 예시

1.

const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' };

const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' };

function print({ alias, name, actor }) or {alias,name,actor} =hero

{ const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;

console.log(text); }

print(ironMan);

print(captainAmerica);}

 

2.배열 분해 예제)

1 2 3 4 5 6 7 8 9 10 11 12

let arr = ["JungHyun", "Lee"] let [firsName, surname] = arr; alert(firstName); //JungHyun alert(sername);   //Lee //구조 분해 할당을 사용하지 않으면 밑에처럼 직접할당해야한다. // let [firsName, surname] = arr; let firstName = arr[0]; let surname = arr[1];

cs

 

 

 

Input Tag 속성  

 

type :모습

checked :어디에 표시를 하고 싶은지 설정 기본 값은 false로 되어있음

 

event.target.value: input 에 들어간 값을 불러오는 함수

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