props, hook

속성 : property : props : 부모가 자식에게 전해주는 것.

부모 -> 자식

갯수, 제한

bind -> this를 컨트롤 할 수 있는 것 (this를 가르키는)

hook : 함수형 컴포넌트에서 최상위에서만 사용가능 (함수밖에서는 안됨)

<hook의 종류>

useState() -> state : 상태를 바꿀 수 있는 것 : 리액트에서 제공하는 함수이기때문에 쓰기 전에 무조건 import를 해줘야함

const [state, setState] = useState(initialValue);
// '배열 구조 분해 할당' 이라는 문법
비구조화 할당
구조분해 할당

배열이나 객체에서 사ㅏ용하는 , 인덱스 안에 있는 것을 쉽게 가져오는 것
const arr = [1, 2, 3];
const [one, two, three] = arr;
const one = arr[0];
const two = arr[1];
const three = arr[2];

만약, 배열 안에 있는 것들과 배열 구조 분해할 친구들이랑 갯수가 다르게 되면 undifined를 출력한다.

function useState(initValue){
  
let state = initValue;
let setState = (value) => state = value;
  // setState 는 함수형태이다

return [state, setState];
}

state, props -> UI를 그리기 위한 재료이다.
자동으로 UI를 업데이트 해줌

부모- 자식간의 소통은 props로
자식들 간의 (형제들끼리 소통은 못한다) -> 부모로부터 형제들 소통해야함.

좋은 웹페이지 즐겨찾기