IT_Developers/React26 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에서 속성(attribute)를 표현하기 리액트에서 속성을 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에서는 속성을 표현할 때는 큰따옴표를 사용합니다. 그리고 JSX는 HTML 기반이기에 속성(attribute) 값은 대부분 같습니다. 하지만 다르게 정의된 값이 있는 것도 알아야 합니다. 그중에 가장 대표적인 속성명은 className입니다. 원래는 class라는 이름으로 많이 봐왔지만 리액트에 한해서는 다르게 사용됩니다. 이 두 가지를 가지고 예제를 한번 보여드리겠습니다. ● 2. CSS에서 아래와 같이 속성에 사용할 스타일의 요소를 추가하였습니다. 이를 JSX에서 사용해보겠습니다. .bluelif { color: blue; } ● 3. JSX에서 속성을 사용할 때는 큰 따옴표를 감쌉니다. 1번째 라인 : class 대신 classN.. 2021. 1. 21. React.js - JSX에서 주석 사용하기 JSX에서 주석 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX에서 주석을 사용하는 방법을 알아보겠습니다. JSX는 자바스크립트 기반입니다. 그러므로 주석도 스크립트에서 사용하는 방식입니다. 주석은 개발자들의 흔적을 남길 수 있고 지우는 대신에 주석을 처리함으로 실행되지 않게 할 수 있습니다. ● 2. 단일 행을 처리하는 주석입니다. 한 줄 한줄 사용 가능합니다. //단일행 주석 ● 3. 복수행을 처리하는 주석입니다. 여러 줄을 처리하는 복수행 주석을 사용합니다. /* 복수행 주석 */ ● 4. 예제 소스를 함께 살펴보겠습니다. 3번, 4번 라인 : 복수행 주석을 사용하여 2개의 줄을 한 번에 주석 처리했습니다. 5번 라인 : 중괄호 안에 자바스크립트에도 사용 가능 6번 라인 : 단일행을 주석.. 2021. 1. 20. 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 - JSX에서 자바스크립트를 사용하는 방법 / 중괄호{} JSX에서 JavaScript 를 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에 대해 알아보았습니다. 자바스크립트와 XML 합성어로 만들어진 단어인 만큼 당연히 JSX에서는 스크립트를 사용할 수 있습니다. 하지만 규칙이 있고 방법은 어려운 부분은 아닙니다. 간단한 예제를 통해서 쉽게 학습할 수 있습니다. ● 2. JSX 태그안에서 중괄호 "{}"는 자바스립트를 사용할 수 있도록 합니다. 일종의 약속입니다. 이 부분만 안다면 자바스크립트를 원하는 곳에 자연스럽게 입력할 수 있습니다. 예제를 한번 살펴보겠습니다. ● 3. 스크립트 영역에서 name 이라는 변수에 "GoCoder"라는 텍스트를 입력하고 이를 element안에 변수를 함께 넣어서 문자열을 만들었습니다. 자바스크립트를 JSX 태그 안에 .. 2021. 1. 20. React.js - 코드펜(CodePen)으로 리액트 실행하기 CodePen으로 리액트 실행 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 코드펜을 사용하여 리액트를 실행하는 방법을 알아보겠습니다. 코드펜은 제 블로그에서 다루었던 프런트엔드 개발을 연습할 수 있는 온라인 IDE 사이트입니다. 해당 사이트의 사용법은 해당 "코드펜 사용법" 태그를 통해서 학습해주시기 바랍니다. 하지만 보통의 개발자라면 바로 사용법을 익힐 수 있기 때문에 그대로 따라오 오셔도 될 거 같습니다. ● 2. 코드펜을 로그인하고 Pen을 생성합니다. 무료 사용자도 사용이 가능합니다. ● 3. 펜이 생성되었다면 Settings를 클릭합니다. ● 4. 왼쪽 탭에 JS를 클릭합니다. 자바스크립트 설정을 할 수 있는 화면이 오른쪽에 나타납니다. 그리고 "Add External Scripts/Pe.. 2021. 1. 18. 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 - 리액트 실행(npm start), 정지(npm stop???) 하는 방법 npm start , npm stop??? 안녕하세요. 고코더 입니다. ● 1. 리액트 프로젝트를 생성 후에는 자동으로 최초 1회 한해서는 자동 실행이 완료됩니다. 그 후에는 직접 해당 프로젝트를 실행할 수 있습니다. 이번 시간에는 create-react-app로 설치한 프로젝트를 시작하고 멈추는 방법을 알아보겠습니다. ● 2. 빌드된 프로젝트를 명령 프롬프트로 이동합니다. 제 블로그와 공부 중이라면 C:\react\hello 폴더에서 실습 중입니다. 해당 폴더에서 아래 명령어를 실행합니다. 프로젝트를 실행하는 npm 명령어입니다. 그럼 자동으로 localhost:3000로 기본 브라우저가 열리면서 결과 값이 보입니다. npm start ● 3. 그렇다면 반대로 stop은 어떻게 할까요? 패키지 파일을 .. 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 2 3 다음
