$$config title: [ReactJS] state 개념 ? keywords: - ReactJS - ... $$ # 개요 : Rerendering을 처리하는 두가지 방법 - 우리가 값을 바꿀 때마다 렌더링문을 넣는 방식 : 그렇게 좋지 않은 방식으로 바꾸고 보여주려는 함수(컴포넌트) 마다 렌더링문을 추가해야 해서 굉장히 불편함.
- 렌더링문 : `ReactDOM.render(<보여주려는 컴포넌트명 />, root);` ```js

... 생략 ... const root = document.getElementById("root"); let counter = 0; function countUp() { counter = counter + 1; //버튼이 눌려서 값이 변할 때마다 UI를 업데이트 해줘야함 (rerendering) render(); } //렌더링 함수 fucntion render() { ReactDOM.render(, root); } function Container() { return(

Total clicks : {counter}

); } //최초 렌더링 render(); ``` 버튼을 클릭할 때마다 Container 컴포넌트 전체가 재생성 (rerender) 됨. 또한 값을 변경하는 부분마다 재생성문(렌더링문)을 작성해야 함 => 불편함. - 자동으로 재생성을 일으키는 " 최고의 " 방법 : state ??? : React.JS 가 data를 담는 것과 data값을 업데이트(렌더링) 하는 걸 도와주는 방법 # state란 ? : 데이터가 저장되는 곳 사용방법 : `React.useState(초기화할 값)` `useState()` 라고 작성한다면 배열 형식으로 [ undefined, function ]을 줌. - undefined : 우리가 담으려는 데이터값이고, 초기값이 undefined(값이 없음.) - function : 우리가 담으려는 데이터값을 바꾸는 함수임. 이 방식으로 state를 활용하여 UI를 재생성하는 것임. # ReactJS의 state의 좋은 점 ? : 리액트는 값을 바꿀 때마다 컴포넌트 전체를 재생성하는 것이 아니라 단지 바뀌는 부분만 바꿔서 재생성함

Total clicks : {counter}

Click me