1. 클래스 / 함수형 컴포넌트 컴포넌트를 선언하는 방식은 두가지이다. 1. 함수 컴포넌트 2. 클래스형 컴포넌트 이렇게 두가지가 있다. 하지만 최근 클래스형 컴포넌트보단 함수 컴포넌트를 주로 사용한다. 다양한 이유가 있겠지만, 주요 이유는 1. 간단한 작성으로 가독성이 좋다. 2. 성능적인 부분에서 함수가 좀 더 효율적으로 사용할 수 있다. 3. 테스트 용이성 2. 컴포넌트 생성 생성 순서는 1. 파일 만들기 -> 2. 코드 작성하기 -> 3. 모듈 내보내기 및 불러오기 컴포넌트를 만들고자 할 때는 컴포넌트 코드를 선언해야 한다. const My Component = () => { return 함수형 컴포넌트 ; }; export default MyComponent; 3. 화살표 함수의 사용 funct..

1. 코드 이해하기 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // ..

1. MVC, MVW, MVVM / 리액트의 개발 Angular, backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 에는 많은 프레임워크가 존재하는데, MVC(model-View-Controller)아키텍처, MVVM(Model-View-View-Model)아키텍처를 사용한다. AngularJS의 경우 MVW(Model-View-Whatever) 아키텍처로 애플리케이션을 구조화함. MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 모델(Model)과 뷰(View)가 있다는 점이다. 모델 : 애플리케이션에[서 사용하는 데이터를 관리하는 영역 View : 사용자에게 보이는 부분이다. 프로그램이 사용자..

5강 버튼에 기능개발을 해보자 & 리액트 state 변경하는 법 1개의 state안에 여러가지 자료를 넣고싶다면 array형식으로 만들어서 사용 아래와 같이 만들어서 사용함 let post = '강남 우동 맛집' let [글제목, b] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬 독학']); 이 자료를 뽑고 싶을 때는 아래와 같이 인덱스 입력하여 사용 return ( ReactBlog { 글제목[0] } 2월 17일 발행 { 글제목[1] } 2월 17일 발행 { 글제목[2] } 2월 17일 발행 터미널을 실행해보면 빨간색 error랑 warning 이렇게 두가지가 나오는데 빨간색의 경우는 중요한 거라서 해결해야함 노란색의 경우는 무시해도 됨. 노란색이 좀 지우고싶다. /* es..

2강. 리액트 설치와 개발환경 셋팅 리액트 파일 만들 때는 폴더를 하나 만든 후 폴더 우클릭 후 터미널로 열기(맥북기준) npx create-react-app blog(blog에 파일명 입력) 리액트 처음 시작할 때 (미리보기) → npm start 왜 설치를 했는가 ? html에도 직접 리액트 설치할 수 있는데 create react app 라이브러리를 사용해서 도움을 받음 사용하려면 npm이 필요해서 node.js 설치해야함 폴더 생성 후 폴더 열기하면 파일 안에 node_modules 폴더 : 라이브러리 보관함 public 폴더 : static 파일(html, 이미지파일 등 보관할 때) src 폴더 : 코드 짜는 곳 - 소스 코드보관함 app.js가 메인페이지 app.js → html app.js ..