오늘은 아래의 코드를 또 다른 방식으로 작성해보자. const container = React.createElement("div", null, [Title, Button]); 그래서 다음과 같이 하면되는것이다. Title과 Button을 함수화 시켜주고, Container로 간단하게 불러오면 되는것이다. 이때 불러오는 것들은 무조건 첫번째 글자는 반드시 대문자이어야한다! 그럼 아래의 부분도 바꿔줄 수 있다. ReactDOM.render(, root); 그런데 다음과 같이 에러가 나는 것을 확인할 수 있다. 왜냐하면 함수로 만들어주지않았기에! 그래서 다음과 같이 변경해보자! 그럼 다음과 같이 정상적으로 출력됨을 확인할 수 있다. 이렇게 코드를 구성하면 개발자들이 보기에도 작성하기에도 편함을 인지할 수있다.

이번에는 JSX에 대해서 배워보자. https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org JSX란? JavaScript를 확장한 문법, React 요소를 만들 수 있게 해줌(HTML에서 사용한 문법과 흡사한 문법 사용) 자 그럼 기존에 작성했던 코드와 다르게 JSX로 작성하면 아래와 같이 하면된다. 근데 다음과 같이 에러가 난다. 이유는 브라우저가 온전히 JSX를 이해하는 것이 아니기때문이다! 그래서 JSX를 설치해보자! 먼저 다음의 두 예시는 동일한데, 첫번째와 같았던 코드를 이제 두번째 예시처럼 변경해보자. const elem..

이번에는 버튼을 만들어보자! 그리고 버튼에서 일어나는 Event를 어떻게 감지하는지도 알아보자~! 이번에는 기존의 span이 아닌 버튼을 출력해보자. 다음과 같이 ReactDOM.render에 span이 아닌 btn을 출력해주면 된다. 그럼 두가지 모두 출력하고자 하면 어떻게 하면 될까? 배열로 렌더하면 된다~! const span = React.createElement("span", null, "Hello I'm a span"); const btn = React.createElement("button", null, "Click me"); const container = React.createElement("div", null, [span, btn]); ReactDOM.render(container, r..

React JS element를 어떻게 생성하는지 배워보자. 이전에 vanilla.html처럼 만들었던 것을 이번에는 React를 이용해 만들어보자. 먼저, ReactJS의 규칙 중 하나는 HTML을 index.html에 직접 작성하지 않는다는 것이다. 대신 우리는 Javascript코드를 입력할 것이다. Javascript와 React JS를 이용하여 element를 생성할 것이다. 그런데 다른사람들이 쓰지 않는 방식으로 어려운 방식을 사용해 보고 쉬운 방식을 연습해보자! (React JS의 본질을 이해하기 위해) 1. React JS element를 만들어보자 자 다음으로는 span을 페이지에 한번 두어보자~! 이제부터는 어떻게 body안에 React element를 가져다 둘 수 있는지 살펴보자. ..

먼저 Vanilla Javascript를 통해 버튼을 클릭하면 counting되는 만큼 화면에 출력하는 페이지를 만들어보자. vanilla.html Total clicks: 0 Click me 그러면 다음과 같이 출력이 된다. 이를 만드는데도 많은 소스코드가 필요하다는 것을 알 수 있다. 다음은 React를 이용하여 페이지를 생성해 볼것인데 먼저 React 공식 페이지를 통해 cdn을 이용하여 React를 사용해보겠다. https://ko.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaScript library for building user interfaces ko.reactjs.org 나는 배포용을 사용하였다. 이 이상은 다음 강의해서 진행 해 보자.