React State & Props[TIL-21]

1. State & Props

state(상태) : 변할 수 있는 값
             컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
             내부에서 변화하는 값
props : 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 
        웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당
        어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
        
        

2. Props 사용방법

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

3. useState 사용방법

1. useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 합니다.
   - import { useState } from "react";

2. 이후 useState 를 컴포넌트 안에서 호출해 줍니다. 
   useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같으며,
   이 변수의 이름은 아무 이름으로 지어도 됩니다. 
   일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 
   의해 함수가 끝나도 사라지지 않습니다.
   - const [isChecked, setIsChecked] = useState(false);

3. useState 를 호출하면 배열을 반환하는데, 
   배열의 0번째 요소는 현재 state 변수이고, 
   1번째 요소는 이 변수를 갱신할 수 있는 함수입니다. 
   useState 의 인자로 넘겨주는 값은 state의 초기값입니다.
   - const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
   
   

4. state 갱신하기

1. state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 state 갱신 함수를 호출
2. state는 상태 변경 함수 호출로 변경해야 합니다. 강제로 변경을 시도하면, 
   리렌더링이 되지 않는다거나, state가 제대로 변경되지 않음