말하는 감자의 개발일기

* state란? : 컴포넌트 내에서 지속적인 변경이 일어나는 값을 관리하기 위해 사용 리액트 이벤트에 의해 변경되는 동적인 값 * 사용하기 : 'useState' 라는 Hook을 이용하여 state를 다룰 수 있다. const [ 상태 ,세터함수 ] = useStae(초기값) 현재 시간 가져오는 예제 import React, { useState } from 'react'; function Main(props) { const [timer, setTimer ] = useState("00:00:00"); const currentTimer = () => { const date = new Date(); const hours = String(date.getHours()).padStart(2,"0"); const ..

* JSX란? : JavaScript XML로 javaScript에 XML을 추가 확장한 문법. 공식적인 자바스크립트 문법은 아님. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리. 1. JSX의 문법 1.1 반드시 부모 요소 하나가 감싸는 형태여야 한다. ! ERROR CASE ! function App(){ return( Hello ); } ! 정상 코드 ! ( ) function App(){ return( Hello ); } ! 정상 코드 ! () function App(){ return( Hello ); } ! 정상 코드 ! () function App(){ return( Hello ); } 1.2 자바스크립트 표현식 : 자바스크립트 표현식을 작성하려면 JSX 내부에서 {}로..

* 레이아웃 나누기 : Header, Main, Footer로 구성 1. src에 functionTest 폴더를 생성 2. 함수형 컴포넌트 Footer.js, Header,js, Main.js 생성 Reactjs Code Snippets 설치 후 약자 치면 편하게 생성가능 2-1. Reactjs Code Snippets 설치 2-2. functionTest 폴더 안에 Header.js 생성 후 rsf * 단축키 정보 trigger content rcc 클래스 컴포넌트 생성 rrc 클래스 컴포넌트와 react-redux 리덕스 연결하여 생성 rcjc import와 export 없이 클래스 컴포넌트 생성 rwwd import 없이 클래서 컴포넌트 생성 rsc 화살표 함수형 컴포넌트 생성 rsf 함수형 컴포넌..

* 컴포넌트란? : React의 핵심 개념으로 사용자 인터페이스(UI)를 구축하는 기반 1. 함수 컴포넌트 * props = 속성을 나타내는 데이터 function Welcome(props){ return Hello , {props.name}; } 객체 인자(props)를 받은 후 React 엘리먼트에 반환하므로 React 컴포넌트이며 JavaScript 함수이기 때문에 "함수 컴포넌트"라고 호칭한다. 2. 클래스 컴포넌트 Class Welcome extends React.Component{ render(){ return Hello, {this.props.name}; } } * 컴포넌트 렌더링 import React from 'react'; import ReactDOM from 'react-dom/cli..

* React란? : UI 구축을 위한 자바스크립트 라이브러리. FaceBook에서 제공해주는 라이브러리로서 주로 SPA(Single Page Application)을 만들 때 사용. React는 재사용 가능한 UI구성 요소를 만들 수 있다. 컴포넌트를 레고처럼 조립하듯 하기에 UI 유지보수에 유리. 전체 페이지 렌더링하지 않고 필요 부분만 렌더링. *SAP : html파일 하나로 다른 페이지를 보여주고 싶을땐 html부분만 변경하여 보여준다. 부드럽게 동작하는 것처럼 보이며 트래픽 총량 줄여 속도 향상 * React 사용이유 1. Virtual Dom의 사용 2. 컴포넌트 단위 개발 3. JSX(JavaScript + xml)의 지원 4. 서버사이드 랜더링(SSR), 클라이언트 사이드 랜더링(CSR) ..