[Develop] 23.07.11 개발 공부 일지

요약: 리액트 기초 문법, 패스트캠퍼스 인터렉티브 UI 실습

일시: 23.07.11 09:30~18:20

장소: 더휴먼컴퓨터아트아카데미

배운 점:

 

node 설치

https://nodejs.org/ko

Node.js

node.js 홈페이지

- 안정성과 신뢰도가 높은 버전을 다운로드 받는 것을 더 추천함.

 

create-react-app 설치

- 리액트 개발을 더욱 쉽게 해주는 템플릿이라고 이해하면 쉽다.

npx create-react-app my-app
cd my-app
npm start

 

ES7 React/Redux/GraphQL/React Native snippets

• rce : class componet 생성
• rafce : allow function component 생성
• rfce : function component 생성

 

클래스 컴포넌트 VS 함수 컴포넌트

// 함수 컴포넌트
function App() {
  return (
    <div>
    </div>
  );
}


// 클래스 컴포넌트
class App extends Component {
  render() {
    return (
      <div>
      </div>
      )
    } 
  }

- 최신 문법은 함수 컴포넌트로 배움에 우선순위를 두어야 하지만 이전에 제작된 코드들은 클래스 형태일 수 있으니 알아두는 것이 좋다.

 

defaultProps

- 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때, 값이 따로 지정되어 있지 않으면 기본값을 지정해줄 수 있는 문법

import React, { Component } from 'react'

function App(props) {
  return (
    <div>
      {props.name}
    </div>
  );
}

export default App;

App.defaultProps = {
    name:"초기값"
}

 

부족한 점:

•