개발 일기

react의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나눌 수 있다. import React from 'react' import './App.css' function App() { const framework = "리액트"; return {framework}; } export default App; 함수형 import React, { Component } from "react"; class App extends Component { render() { const framework = "리액트"; return {framework}; } } export default App; 클래스형 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 클래스형 컴포넌트에서 state 기능 및 라이프사이클 기능을 사..

JSX란 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이는 코드가 브라우저에서 실행되기 전에 코드 번들링 되는 과정(묶이는 과정)에서 바벨 컴파일러로 일반 자바스크립트 형태의 코드로 변환된다. 다음은 JSX 코드가 일반 Jascript 코드로 변환되는 과정이다. function App() { return ( Hello react ) } function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 문법 - 반드시 요소 여러 개가 부모 요소 하나에 의해 감싸져 있어야 한다. 로 감싸기싫은 경우 나 로 감싸줘도 된다. 이는 가상돔에서 컴포넌트 변화를 감지해 ..

Node.js 설치 리액트 프로젝트를 생성하기 위해서는 Node.js가 먼저 설치되어 있어야 한다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 이후에 터미널에서 node -v 명령어로 버전을 확인할 수 있다. yarn 설치 다음으로는 npm말고 yarn이라는 패키지 관리자 도구를 설치하도록 하겠다. npm에 익숙해져 있으나 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공한다고 하니 써보는 것도 좋을 것 같았다. https://classic.yarnpkg.com/en/docs/install#debian-..