FE/React & TS

[REACT] Component

클래스형 컴포넌트 import React, { Component } from 'react'; import './App.css' class App extends Component{ render(){ const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트와 함수 컴포넌트의 차이점 : 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프 사이클 기능 사용 가능, 임의 메서드 정의 가능 클래스형 컴포넌트에서는 render 함수가 꼭 있어야하고, 그 안에서 보여 주어야 할 JSX 반환해야 함. 보통 함수 컴포넌트와 Hooks 사용 권장, 그치만 일단 알아두자.. const MyComponent = () => { //화살표 함수 문법 ..

[REACT] JSX

import logo from './logo.svg'; import './App.css'; //App이라는 컴포넌트 만들어주는 코드 function App() { //함수 컴포넌트 //프로젝트에서 컴포넌트 렌더링하면(보여준다는 의미) 함수에서 반환하고 있는 내용 나타냄 //JSX라고 부름 return ( Edit src/App.js and save to reload. Learn React ); } export default App; 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환. 매우 편하게 UI 렌더링 가능 function App() { //함수 컴포넌트 //프로젝트에서 컴포넌트 렌더링하면(보여준다는 의미) 함수에..