[JavaScript] ReactJS: STATE(1)

ReactJS에서 'State'

State(상태): 컴포넌트 내부에서 관리하는 데이터 / 컴포넌트의 동적 상태를 반영 / 변경 가능 

Props(속성): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값 / 컴포넌트 외부에서 설정 / 읽기 전용 

 

ex. '버튼 클릭 수(counter)'를 state로 관리할 수 있다 

---

1. 수동 렌더링: 새롭게 바뀐 부분(클릭 수)만 rendering 

   - 새 Container 컴포넌트를 생성하는게 X 

   - 전체를 재생산하지 않고, 변경된 부분만 업데이트한다

Container: JSX로 정의된 함수형 컴포넌트

 

2. 자동 렌더링: 데이터가 바뀔 때마다 Container를 rerendering & refresh UI(권장) 

  - 위 방법의 단점: 데이터가 바뀔때마다 렌더링 함수를 넣어줘야한다 

  - 새로운 방법: ReactJS 앱 내에서 데이터를 보관하고 & 자동으로 리렌더링 되도록 

  - state가 변경되면 자동으로 rerendering이 발생(자동으로 컴포넌트를 refresh)  

  - useState: React 애플리케이션을 다룰때, 어디에 데이터를 담을 것인가 

  - setCounter: 컴포넌트의 state를 변경. 값을 직접 입력 or 함수를 전달 

 

 

 

참고) 

// array 요소들 변수로 설정하기 

const food = ["tomato", "potato"]

const [myFavFood, mySecondFavFood] = food; 

myFavFood
//> 'tomato'

mySecondFavFood
//> 'potato'