JSX 문법을 사용해 CSS를 적용하는 방식은 HTML에서 CSS를 적용하는 방식과 유사합니다. 역시 다른 점이라고 한다면, JSX 문법으로 인해 생기는 HTML과의 차이점 정도라고 할 수 있겠습니다. [JSX에 대해서] JSX에서 style은 객체 형태로 넘겨줄 수 있어, style을 먼저 변수로 선언한 뒤 {중괄호}로 불러올 수 있습니다.CamelCase를 사용합니다(e.g. background-color → backgroundColor).스프레드 문법({..., })을 사용하면 클래스 상속과 같이 다른 스타일의 요소들을 사용할 수 있습니다.아래는 버튼에 스타일을 적용하는 코드입니다. 버튼의 공통된 스타일은 baseButtonStyle에, 색과 관련된 코드는 blueButtonStyle과 redBut..

특정 매커니즘(FSM)에서 상태를 표시할 변수가 필요할 때 state를 사용할 수 있습니다.리액트에서 state는 useState( ) 함수를 통해 사용할 수 있습니다.// useState를 사용하기 위해 먼저 불러와야 합니다.import { useState } from 'react';// useState를 호출하면, num 변수와 setNum 함수를 반환합니다.const [num, setNum] = useState(1);useState( )는 초기 상태값을 매개변수로 받으며, 두 가지 요소를 반환합니다.num : 현재 상태 값setNum : num의 값을 변경하는 함수(물론, 이 두 반환값의 이름은 임의로 지을 수 있습니다) 아래 예시는 무작위 값을 num으로 하여 setNum()함수를 이용해 상태값을..

React에는 기본적으로 제공되는 prop이 있는데, 그것이 바로 children prop입니다.children은 컴포넌트의 여는 태그와 닫는 태그 사이에 입력된 값을 받는 prop입니다. 아래 코드는 'but A', 'but B'라는 이름의 버튼 두 개를 출력합니다.이런 경우처럼 단순히 보여지기만 하는 값을 다룰 때는 좀 더 직관적으로 코드를 작성할 수 있습니다.// *** Button.js *** //function Button({ text }) { return {text};}export default Button;// *** App.js *** //import Button from './Button';function App(){ return( );}expor..

React에서는 jsx를 통해 생성한 요소(element)를 함수를 이용해 새로운 태그로 정의할 수 있는 방법이 있는데,이를 컴포넌트(Component)라고 합니다.1. 컴포넌트 선언 및 호출컴포넌트를 활용하기 위해서는 다음 두 가지 조건이 필요합니다.     1. 함수 이름의 첫글자를 대문자로 해야 하고    2. 반환값은 jsx 문법으로 만든 요소이어야 한다 // *** App.js *** //// App 컴포넌트를 만들었습니다.function App(){ // return값은 jsx로 만든 html 코드입니다. return ( hello world );}export default App; // 외부 파일에서 App 컴포넌트를 사용할 수 있게 합니다.// ..

JSX는 React에서 제공하는 JavaScript의 확장 문법입니다.React로 코드를 작성할 때 JSX 문법을 활용하면 훨씬 편리하게 화면에 나타낼 코드를 작성할 수 있습니다.const element = Hello, world!;위의 코드를 보면 단순한 HTML 코드를 사용하는 것 처럼 보일 수 있지만, 엄밀히 말하면 HTML과 유사한 문법으로 작성한 것입니다.JSX는 실제 실행시 HTML 코드, 정확히는 요소(element)를 만들수 있게 합니다.이 때문에 JSX는 HTML 문법과 몇 가지 다른 점이 존재합니다.JSX에서의 JavaScript 사용JSX는 HTML 코드를 위한 확장 문법이지만, 기본적으로 JavaScript인 만큼 원래 표현식들도 함께 사용 가능합니다.(단, 조건문 & 반복문 등의 ..

index.html과 index.js는 프론트엔드에서 Jsx 요소 작업을 함에 있어서 가장 기본적으로 다루게 되는 두 가지 파일입니다. 이 두 파일은 React / SolidJS프로젝트를 새로 시작할 때도 확인할 수 있습니다. [React 프로젝트 시작하기] [SolidJS 프로젝트 시작하기]1. index.html기본적으로 웹 페이지를 구성하는 html 코드 파일입니다.가장 먼저 실행되며, react가 없더라도 흔히 생각할 수 있는, html과 css를 이용해 구현한 코드입니다.2. index.jsJsx 요소를 구현해 놓은 파일입니다.index.html 다음으로 실행되며, 이 파일에서 구현한 Jsx 요소들은 index.html 파일에서 태그 형태로 삽입됩니다.

웹 브라우저에는 개발자 도구가 존재합니다.Chorme 브라우저의 경우 웹페이지에서 F12를 누르면 개발자 도구를 불러 올 수 있습니다.개발자 도구에서는 웹페이지를 이루고 있는 HTML/CSS 코드를 볼 수 있는데,만약 웹페이지가 React를 이용해 만들어졌다면 React 개발자 도구를 이용해 해당 요소들을 볼 수 있습니다.React 개발자 도구는 기본 도구와 달리 Chorme 브라우저에서 추가로 설치해야 하는 플러그인입니다.1. 설치구글에 리액트 개발자 도구 혹은 React Developer Tools 라고 검색하면 아래 Chrome 웹 스토어 페이지로 들어갈 수 있습니다.2. 설치 확인 설치가 완료되었다면, 브라우저 우측 상단에 퍼즐 모양 아이콘을 눌러 브라우저에 설치된 플러그인 목록들을 확인해주세요...

VScode 기준으로 설명하겠습니다.node.js가 필요합니다. 여기서는 Vite라는 프로그램의 템플릿을 이용해 React를 설치하는 법을 설명해줍니다.1. 패키지 초기화 & 생성프로젝트를 시작하고자하는 경로로 들어가 아래 명령어를 실행합니다. Typescript & Javascript에 따라 다르게 설정 할 수 있습니다. my-app에는 프로젝트 이름을 입력하면 되겠습니다.npm create vite@latest my-app -- --template react-jsnpm create vite@latest my-app -- --template react-ts 설치한 프로젝트 폴더에 들어가서 나머지 의존관계를 해결합니다.cd my-appnpm install2. 초기 구성설치가 완료되면, 다음과 같은 파일들..