React ( state & props )

State 는 상태이다. 즉 변할 수 있는 값이다. 

컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값이다. 

 

state 와 props 의 다른점은

State 는 내부에서 변하는 값

Props 는 외부로 부터 전달 받은 값

 

• Props

1. 컴포넌트의 속성(property)을 의미한다.

-> 외부로 부터 전달 받은 값이다.

 

2. 부모 컴포넌트(상위) 에서 전달받은 값이다. 

-> React 컴포넌트는 JS의 함수나 클래스로, props를 함수의 전달인자처럼 받아 이를 기반으로 화면에 어떻게 

표시되는지를 기술하는 React 엘리먼트를 반환한다. 그래서 컴포넌트가 최초로 랜더링 될 때 화면에 출력하고자 

하는 내용을 초깃값으로 줄 수 있다. 

 

3. 객체형태 이다.

-> props로 어떤 타입의 값도 넣어 전달 할 수 있도록 props는 객체의 형태를 갖는다. 

 

4. props 는 읽기 전용이다. 

-> 전달 받은 값을 고칠 수 없는 , 즉 props 는 함부로 변경될 수 없는 읽기전용 객체 이다. 

 

• State 

변할 수 있는 값이다. 

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

( 상태가 변하는 컴포넌트면 무조건 useState 로 상태를 관리해 줘야 한다고 생각하면 좋다. )

 

• useState ( State Hook )

예시.

const [ isLoding, setisLoding ] = useState() 

( isLoding = 현재 상태 저장변수, setisLoding = 현재 상태 갱신 함수, useState(상태 초기값) )

 

useState는 두가지 함수? 같은걸 갖고 있는데

첫번째는 현재 상태를 갖고 ( useState[0] )

두번째는 현재 상태를 업데이트 해주는 상태 ( useState[1] )

이렇게 두가지를 갖고 있다. 

 

useState 안에 매개변수처럼 () 가 있는데 이는 상태 초기값을 줄 수 있다. 

 

state 를 갱신하려면 setState를 호출해야 한다. 

state 를 강제로 변경을 시도하면 안된다. 강제로 변경을 할 경우 re rendering  이 되지 않거나, state가 제대로 작동되지 않는다.