[React] 001 버튼 클릭시 숫자 증가

조승원·2021년 11월 30일
0

React

목록 보기
1/3
post-thumbnail
post-custom-banner

개념의 정리보다 이제 하나하나 기능을 구현할때 마다 포스팅을 하려고 합니다.

React 를 처음 시작하고 만든 버튼 클릭시 텍스트의 숫자가 증가하는 것을 구현해봤습니다.

        function App () {
            const [counter, setCounter] = React.useState(0);
            function onClick(){
                setCounter(counter+1);
            }
            return(
                <div>
                    <h1>count : {counter}</h1>
                    <button onClick={onClick}>click</button>
                </div>
            )
        }

        function render(){
            ReactDOM.render(<App />, root);
        }
        render();

React 강의를 들으면서 React의 설치법과 사용 이유, 장점에 대해 많이 배우게 되었습니다.

HTML,CSS로 작성해도 괜찮을거 같은데 굳이 React를 사용하여 UI를 구현 하는 것에 의문이 있었는데 JSX 문법과 이벤트를 바로주고 값의 변경에 따라 리렌더링 되는 부분에서 바뀐 부분만 리렌더링 되는것을 보고 React의 강점을 느꼈습니다.

profile
Front-end
post-custom-banner

0개의 댓글