WEB Frontend4 ReactJS로 영화 웹 서비스 만들기 #2 - State & Props State state 이 코드에서 시작을 해보자. 코드는 간단하다. button을 누르면 counter += 1 증가되는 코드이다. 그런데 기대와는 다르게 click을 눌러도 counter가 증가하지 않는다. 그런데 console에 counter 값을 찍어보면 증가한 것을 볼 수 있다. 이는 현재코드에서 렌더링을 딱 1번만 하기 때문이다. ReactDOM.render(,root) 그렇다면 다음과 같이 counter를 증가시키는 함수 안에 ReactDOM.render 코드를 넣어서 렌더링을 그때 마다 해주면 되지 않을까? 맞다. 위와 같이 함수 안에 ReactDOM.render 함수를 넣어주니 원했던 대로 동작한다. 그러나 이는 언뜻 생각해봐도 좋은 방법이 아니다. 매 함수마다 render 함수를 호출해야.. 2022. 5. 10. ReactJS로 영화 웹 서비스 만들기 #1 - 도입 도입 순수 HTML 버튼을 클릭하면 숫자가 1씩 증가하는 기능을 만들어보자. 다음과 같은 로직이 필요하다. HTML을 생성한다. JS에서 HTML 태그를 찾아온다. eventListener를 생성한다. eventListener에 함수를 등록한다. 위의 로직에 따라 아래와 같은 코드가 생성된다. total click : 0 Click me 위의 코드를 react 스럽게 바꿔보자. 그러려면 react library를 다운받아야 한다. body 태그 밑에 추가해주자. React React JS가 HTML을 생성해준다. 하지만 그렇게 하려면 React DOM을 생성해야 한다. React JS는 Application이 interative 하게 만들어주는 Library이다. React DOM은 모든 React El.. 2022. 4. 20. CSS 기본 #1 보호되어 있는 글 입니다. 2021. 7. 25. 프론트엔드 1강 보호되어 있는 글 입니다. 2021. 5. 8. 이전 1 다음
