컴포넌트 정의NOTE!컴포넌트: 스스로 상태를 관리하는 캡슐화된 코드 조각으로, 하나의 JSX를 반환하는 함수이다. 컴포넌트는 기본적으로 함수이기 때문에, 자신만의 고유한 로직이 들어갈 수 있다. 그리고 컴포넌트는 스스로 상태를 가질 수 있으며 상태가 변하면 자동으로 반영된다.`import`와 `export` 문법을 사용하여 컴포넌트를 모듈 방식으로 분리하고 관리한다.import Hello from './components/Hello';import World from './components/World';export default function App() { return ( );} 컴포넌트의 이름은 반드시 PascalCase로 작성해야 한다. 즉, 컴포넌트의 이름..

JSX 개념NOTE!JSX는 Javascript를 확장한 문법이다.JSX는 HTML처럼 보이지만 JavaScript 값이다. 따라서 내부적으로 JavaScript를 사용할 수 있다.const element = Hello, World!`React`는 기본적으로 JSX를 이용하여 화면을 렌더링한다.JSX의 특징 JSX는 HTML이 아니기에 JSX에서 사용되는 태그의 속성 이름은 HTML과는 약간 다르다.`class` → `className``for` → `htmlFor``onclick` → `onClick`그리고 다음과 같이 반드시 태그를 명시적으로 닫아줘야 하고, 하나의 부모 태그로 감싸져 있어야 한다.function App() { return ( Hello, World! ..

Node.js `Node.js`는 브라우저 밖에서도 JavaScript를 실행할 수 있도록 하는 런타임 환경이다. 오픈 소스 JavaScript 엔진인 크롬 V8을 기반으로 동작한다. Single Thread의 non-blocking I/O 이벤트 기반 비동기 방식이다. 이는 코드가 실행될 때, 작업이 오래 걸리는 코드를 만나면 해당 코드의 실행이 끝나기를 기다리지 않고 넘어가고 시간이 지나 해당 코드 실행이 완료되면 그때 결과를 따로 받아서 처리한다는 것이다.NOTE!기존에는 브라우저에서만 JavaScript를 사용할 수 있었으나, `Node.js`를 통해서 로컬 PC에서도 사용할 수 있게 되었다.NPM(Node Package Manager)`Node.js`와 떨어질 수 없는 것이 바로 NPM인데, 이..

React가 무엇인가? `React`는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 특별히 `React`는 SPA 라이브러리(Single Page Application)이다. 이때 `React`는 프레임워크가 아닌 "라이브러리"에 속하는데 프레임워크와 라이브러리의 차이는 다음과 같다.프레임워크(Framework): 개발을 위한 기본 틀, 뼈대라이브러리(Library): 개발에 필요한 도구 또는 그 집합 `React`는 라우팅과 같은 프레임워크로서 갖춰야 할 기본적인 요소들을 모두 갖추고 있지는 않기에 프레임워크에 속하지 않고 라이브러리에 속한다.React를 배워야 하는 이유 그렇다면 `React`를 배워야 하는 이유는 무엇일까? 대표적으로 2가지의 장점 때문이다.트렌드이다: Rea..