monstrosite

- 개요 컴포넌트는 화면을 구성하는 하나의 요소로 스스로 상태를 관리하며 하나의 JSX를 반환하는 캡슐화된 함수를 의미한다화면에 무엇을 그릴지 결정하는 JSX와 다르게 컴포넌트는 기본적으로 함수이므로자신만의 고유한 로직이 포함될 수 있고 스스로 상태를 가질 수 있어 상태가 변하면 알아서 반영된다 - 컴포넌트의 사용// App 컴포넌트export default function App() { return ( Hello, World );} 위와 같이 최상위 컴포넌트인 App 컴포넌트의 코드를 구성하였다 // Hello 컴포넌트export default function Hello() { return ( Hello, );} // World 컴포넌트ex..

- 개요JSX 문법에 CSS를 추가하여 웹페이지에 스타일을 적용하는 방법을 알아본다스타일을 적용하는 방식은 JS를 사용한 CSS in JS 방식이다 1) JSX에서의 스타일링 적용 - JS 오브젝트의 사용import ReactDOM from 'react-dom';// JS에서 CSS 스타일링을 적용하는 코드// style="position:relative;width:400px"const element = ( );ReactDOM.render( element, document.getElementById('root')); JSX 코드에서 CSS 스타일링을 적용하기 위해서는 JS 오브젝트를 사용한다위의 JSX 컴포넌트에서 첫 번째 중괄호는 JSX에 JS 오브젝트를 넣기 위함이고,두 번째 중괄호는 JS 오브..

- 개요JSX 코드에서 조건문과 반복문을 사용하는 방법을 알아본다 1) 조건문1 - 1) 삼항 연산자import ReactDOM from "react-dom";const element = ( 삼항연산자 {1 + 1 === 2 ? "참입니다." : "거짓입니다."} );ReactDOM.render(element, document.getElementById("root")); 삼항연산자는 "조건 ? 참값 : 거짓값"의 구조로 이루어져 조건문을 한줄에 작성하여 가독성을 높일 수 있다이때 JS에서는 값이 동등한지 비교할 때, "===" 연산자를 사용한다 코드의 실행 결과는 위와 같다 1 - 2) AND 연산자import ReactDOM from "react-dom";const..

- 개요JSX로 작성된 코드에서 JavaScript를 사용하는 방법을 알아본다 - 예제let text = 'Hello, world!';const num = 15;const obj = { key: 0, a: 1, b: 2 };const arr = ['a', 'b', 'c'];const imageUrl = 'https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg'; 사용하는 코드는 위와 같다위와 같이 JS로 작성된 변수들을 선언하였다문자열 변수숫자 변수JS 오브젝트 변수배열 변수이미지 경로를 담은 문자열 변수 1) 문자열과 숫자 데이터import ReactDOM from 'react-dom';const element = ( 변수 넣기 ..

- 개요React에서 화면을 그리기 위해 사용하는 JSX에 대해서 알아본다 1) JSX란?JSX는 JS와 XML을 합쳐서 확장한 문법이다모양은 HTML에 가깝지만, 내부적으로 JS를 사용한다React는 JSX를 사용하여 화면을 표현한다 2) JSX의 특징JSX는 다음과 같은 특징을 갖고 있다1) 태그의 속성 이름이 HTML과 다른 경우가 존재함2) 반드시 태그의 끝을 명시해야 함3) 하나의 태그로 감싸져 있어야 함 Hello, World 위의 코드는 HTML 코드이다 Hello, World! 위의 코드는 바로 위의 HTML 코드를 JSX로 작성한 코드이다살펴보면 class 속성을 className 속성으로 사용하고 있다또, 태그의 끝을 "/>" 태그를 사용하여 명시하고 있다마지막으로 그리고..

- 개요웹페이지 개발에 널리 사용되는 React와 React의 특징을 알아본다 1) React란?React는 UI를 만들기 위한 JavaScript 라이브러리이다개발을 위한 기본적인 틀을 의미하는 프레임워크와는 다르게,라이브러리는 개발을 위한 도구의 집합으로서 프레임워크보다 넓은 의미를 갖고 있다 2) MPA와 SPAReact를 사용하지 않은 기존의 웹페이지는 MPA(Multi Page Application) 방식을 사용하여페이지를 이동할 때마다 서버에서 전체 HTML을 새로 받아오는 방식으로 동작하였다이는 화면의 깜박임 현상을 발생시켜 UX를 낮추는 악영향이 존재했다 그러나 React, Vue, Angular와 같은 JS 라이브러리들은 SPA(Single Page Application) 방식을 사용하여..