0814 주말자습

HOOK은 무엇인가?

[count,setcount] = useState(10)

count와 setcount는 useState 의 리턴값을 구조 분해 할당한 변수이다.

함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 모든 타입이 될 수 있다.

useState 자체가 HOOK 이며, HOOK은 특별한 함수이다.
useState의 특별한 기능은, state를 function component 내부에서 사용할 수 있도록 해준다는 점이다.

useState는 현재의 state 값(count)과 이 값을 업데이트하는 함수(=setCount)를 동시에 제공한다.
따라서, useState는 "state 변수 + state 변수를 갱신할 수 있는 함수" 를 반환한다.

useState는 인자로 state의 초기값을 넘겨준다.
객체일 필요는 없으며, number type 또는 string type이 올 수 있다.

state 가져오기

{this.state.count}를 {count}로 바로 사용 가능하다.

state 갱신하기

this를 호출하지 않아도 된다.
onClick={ () => this.setState({ count:this.state.count+1 }) } 에서
onClick={ () => setCount(count+1) } 처럼 사용한다.

REACT의 구조분해할당

// 구조분해할당 방법1.
function Food(props){
  { fav } = props;
  return <h1> I like {fav}</h1>;
}


// 구조분해할당 방법2.
function Food({fav}){
return <h1> I like {fav}</h1>;
}

방법1처럼 {변수}가 무엇을 구조분해할당했는지 말을 해줘야만 될거같은데 말도 없이 방법2처럼 바로 분해할수 있는게 신기하다. 하긴 Food라는 함수컴포넌트의 파라미터가 쓰여야할 부분()엔 props가 들어올거니까 그 자리에서 바로 {}구조분해할당을 써주었기 때문에 {변수} = props객체 이렇게 안써줘도 된다.

컴포넌트

컴포넌트를 먼저 완성시키고, 레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있는 상향식 개발 (Bottom-up) 방식에 적합하다.

컴포넌트 기반 개발의 가장 큰 장점은 기능별로 나눠진 컴포넌트를 미리 만들어두고 이후에 재사용하기 용이하다는 점이다. 기획이나 디자인이 변경되어도 쉽게 고칠 수 있다.