본문 바로가기

배움/React

[ReactJS로 영화 웹 서비스 만들기] #3.1

- 변수 생성 후 부르는 법,

- 부분 렌더링 ( render 부를 

 

<!DOCTYPE html>
<html>
    <body>
        <div id="root" style="background-color: lightpink;"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel"> 
        const root = document.getElementById("root");
        let counter = 0;
        function countUp() {
            counter = counter +1;
            render();
        }
        function render(){
            ReactDOM.render(<Container />, root);
        }
        //const container = React.createElement("div",null, [Title, Button]);
        const Container = () => <div>
            <h3>Total clicks : {counter}</h3>
             <button onClick = {countUp}>Click me</button>
            </div>
        /* same thing
        const Container() { 
            return(
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick = {countUp}>Click me</button>
            </div>
            );
        }
        */
        render();
    </script>
</html>

 

무료 강의니 관심있으신 분이 있다면 들어둬도 괜찮을 것 같다.

 

지금 과제이벤트 같은 것도 진행해서 참여하면 뭐 문제도 풀고, 여러 사람이랑 공유하고 하다보면

역량 향상에도 도움이 되지 않을까..

개인적으로 파이썬(python) 22기였나(정확하지 않음) 신청했는데 다른 일로 바빠서 며칠 안들어갔었다.

그러자 메일이 왔는데 며칠 출석하지 않으면 탈락된다고ㅎㅎ...

다음 기수도 있으니 5월 7일인가에 시작하는 걸로 참여하기로 했다.

 

 

 

https://nomadcoders.co/courses

(그림 눌러도 들어가진다..)


잡설

예전에 개발할 때 드롭박스의 값을 선택하거나 버튼 누르면 데이터를 다시 불러와야 해서

테이블을 주로 렌더시키곤 했는데 다시 보니 반가웠다.

그때는 그냥 부분 새로고침 함수 정도로만 생각했는데 틀린 말은 아니었지만,

확실히 배우는 것과 현업에 필요해 대략적으로 뭘 하는지 알고 가져다가 쓰는 것은 다른 것 같다.

그냥 막무가내로 썼었던 걸 개념으로 익히니 뭔가 재밌고 흥미돋는다. ㅎㅎ

'배움 > React' 카테고리의 다른 글

[ReactJS로 영화 웹 서비스 만들기] #1.1 ~ #2.6강을 듣고  (0) 2022.04.24