박지연의 코딩이야기

앞서 동적인 UI를 만들기 위해서 render 함수에 ReactDOM.render(, root); 코드를 넣어주어서상태값이 바뀔때마다 render함수를 호출해주는 코드를 짰었다.  이전글 참고https://coogooo.tistory.com/39 동적인 UI를 구현하는 핵심 요소  위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다" data-og-host="coogooo.tistory.com" data-og-source-url="https://coogooo.tistory.com/39" data-og-url="https://coogooo.tistory.com/39" data-og-image="https://scrap.kakaocdn.net/dn/wcPUn/hyX0yEsk4..

리액트(React)에서 State는컴포넌트의 동적인 데이터를 관리하는 데 사용되는 객체=> 동적인 UI를 구현하는 핵심 요소  위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다. 1번째 리액트 UI컴포넌트를 만들어준다.    const Container = () => (      div>        h3>Total Clicks : {counter}h3>        button onClick={countUp}>CLick mebutton>      div>    );   1번째버튼을 누르면 숫자 상태가 변경되어야 하기에 let counter = 0; 초기값 '0'을 하나 선언해준다.       //2번째    let counter = 0;  2번째증가되는 함수를 만들어 ..