JSX5 React.js - JSX를 사용하지 않고 createElement를 사용하기 JSX를 대신해서 리액트 object 형태로 표현하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX를 사용하지 않고 리액트로 엘리먼트를 생성하여서 사용하는 방법을 알아보겠습니다. 다시 말하면 JSX는 리액트에서 필수가 아닙니다. 쉬운 개발과 성능의 이점때문에 대부분의 리액트 환경에서 JSX를 사용하는 것입니다. 저와 배워보는 리액트들도 JSX를 기준으로 예제를 만들어 갈것입니다. 그래도 JSX 없이 어떻게 element를 생성하는지 알아보겠습니다. ● 2. JSX를 사용했을 때 사용했던 간단한 방식입니다. HTML을 그대로 사용하면 되는 방식이었습니다. 덕분에 새롭게 문법을 배울 필요가 없었습니다. const jsxElement = JSX Element ● 3. 하지만 만약 리액트의 기능을 .. 2021. 1. 22. React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법 JSX에서 style 속성에 값을 주는 방법 안녕하세요. 고코더 입니다. ● 1. JSX에서는 스타일 시트 즉 CSS를 Inline 형식으로 입력하는 방법을 알아보도록 하겠습니다. 흔히 HTML과 CSS를 배울 때 태그에 style이란 속성 값을 선언하고 안에 디자인할 내용을 채워 넣습니다. ● 2. 예를 들면 이렇습니다. 많이 보던 방식입니다. 1번 라인 : 문자열을 빨간색으로 바꾸는 스타일을, 배경은 검은색을 적용합니다. Inline stylesheet ● 3. 하지만 JSX에서는 인라인 방식의 CSS를 Object 형식으로 만들어서 직접 태그에 넣는 방식의 인라인 스타일 방식이 사용 가능합니다. 이렇게 하면 가독성도 좋고 개발하기도 매우 편리합니다. 그 방법을 알아보도록 하겠습니다. 1번 라인 : .. 2021. 1. 22. React.js - JSX에서 자바스크립트 문법 사용하기 JSX에서 javascript 문법 사용 안녕하세요. 고코더 입니다. ● 1. JSX는 자바스크립트와 XML이 합쳐진 확장 문법이라고 배웠습니다. 그러므로 JSX에서는 자연스럽게 자바스크립트의 모든 문법을 지원합니다. ● 2. 그러므로 자바스크립트에서 사용하는 제어문인 IF부터 함수를 만드는 function까지 모두 사용이 가능합니다. 예제 소스를 함께 살펴보겠습니다. function getGuest(user) { if (user) { return Hi {user}!; } return HI! Guest; } const element = {getGuest()}; //const element = {getGuest("GoCoder")}; ReactDOM.render( element,document.getEle.. 2021. 1. 20. React.js - 리액트에서 "Hello JSX!" 출력하기 JSX를 사용해서 페이지 띄우기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX를 사용해 간단하게 리액트에서 "Hello JSX"를 표현해보려고 합니다. 리액트를 처음이라면 우선 JSX를 간단하게 사용하는 방법을 배워보는 게 좋을 거 같아서 JSX를 아주 간단하게 작성해보는 시간을 가집니다. 우선 이전에 프로젝트 빌드까지 과정이 끝나야 합니다 카테고리에 있는 글을 차례대로 읽어보시면 좋습니다. 그럼 create-react-app로 프로젝트가 완성되었다고 진행해보겠습니다. ● 2. 프로젝트 폴더에서 index.js 파일을 열어보겠습니다. 다양한 에디터 도구가 있지만 추천하는 건 VSCode로 수정을 해보시길 바랍니다. C:\react\hello\src\index.js ● 3. index.js 안.. 2021. 1. 17. React.js - JSX란? JavaScript + XML? JSX란? JavaScript eXtension 이란? 안녕하세요. 고코더 입니다. ● 1. 오늘은 JSX에 대해 알아보려고 합니다. 이름도 조금 낯설지만 알고 보면 우리가 익숙하게 사용했던 언어와 많이 닮아 있습니다. 하나둘씩 알아가 보는 시간을 가져보겠습니다. 이번 시간에는 이론적인 부분만 학습하겠습니다. ● 2. JSX란 Javascript+XML의 합성어입니다. 다시 말하면 XML 사용을 허용하는 자바스크립트 확장 문법이라고 말합니다. 빌드 시 Babel에 의해 자바스크립트로 변환됩니다. 자바스크립트와 HTML을 표현할 수 있기 때문에 편리한 개발이 가능합니다. 자바스크립트 내부에 마크업 코드를 작성해줄 수 있습니다. 그리고 변수와 프로퍼티의 바인딩 기능을 제공합니다. ● 3. 개발자에게 익숙하고.. 2021. 1. 17. 이전 1 다음
