React/공식 문서 따라하기

JSX const element = Hello World!; 위의 문법이 무엇으로 보일까? JS?? HTML?? 아니면 그냥 문자열?? 위의 문법은 JavaScript를 확장해서 만든 JSX라고 한다. JS를 확장했기 때문에 JS의 모든 기능을 사용할 수 있고, 위의 문장처럼 HTML 태그를 사용해서 표현할 수도 있다. 위의 문장을 index.js의 React.render 내부에 추가하면 아래의 사진처럼 결과가 나올 것이다. JSX는 주로 React의 element를 생성하는데 이는 다음 챕터에서 엘리먼트에 대해 설명할 때 다루도록 하겠다. JSX란? React의 목적 중 하나는 결합성을 줄이고 응집성을 높이는 데에 있다. 이는 좋은 소프트웨어를 만들기 위해 중요한 부분 중 하나다. 소프트웨어 공학 개론..

리액트를 사용해 화면에 'Hello World'를 띄우는 가장 간단한 방법은 ReactDom.render( Hello World document.getElementById('root'); ) 위의 코드를 입력하는 것이다. 나는 create-react-app으로 리액트를 환경을 구성했기 때문에 /src/index.js 파일에서 ReactDom.render 부분을 위와 같이 수정했다. 수정 후 리액트 페이지를 들어가면 다음과 같이 나를 반겨주는 메시지를 볼 수 있다.