Array, Object State 변경하기

복사, 수정, 적용 array나 Object로 된 state를 변경할 때는 기존 state를 copy하여 수정 한 후 setState 해줘야 한다. let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); { let copy = [...title]; copy[0] = '여자코트 추천'; setTitle(copy); } }>글 수정 setState(변경할 값) 함수의 동작 특징 기존 state와 변경될 state를 비교 후 다를때에만 state 변경을 해준다. array, object의 특징 JavaScript에서 array와 object가 담겨있는 변수에는 해당 값이 저장되는것이 아니라, 해당값이 저장되어 있는 공간에 화살표만 저장된다. s..

2022.11.11

useState()

1. useState() 사용하기 useState를 사용하려면 우선 상단에 useState를 import 해야 한다. useState라고 입력 후 엔터를 치면 상단에 자동으로 import 된다. state는 최상위 컴포넌트에 만드는게 좋다. 부모>자식 간 props 전송은 가능하지만 반대는 안되기 때문이다. import { useState } from 'react'; 2. useState() 문법 import { useState } from 'react'; function App () { let [작명 set작명] = useState('보관할 자료'); return ( 누르면 작명이 바뀐다 { 작명 } ) } export default App; let [작명 set작명] = useState('보관할 자료..

2022.11.11

JSX 문법 3가지

JSX란? import logo from './logo.svg'; import './App.css'; function App() { return ( ) } export default App; App.js 이 우리의 메인 페이지다. App.js에 div 하나만 남기고 삭제해보자. JS파일인데도 동작하는 이유는 HTML이 아니라 JSX이기 때문이다. JSX란 JavaScript 안에서 HTML을 쉽게 작성할 수 있게 도와주는 부가기능 혹은 언어라고 생각하면 된다. JSX를 사용하면 기존 HTML처럼 간단하게 레이아웃을 만들 수 있다. JSX를 쓰는 이유는.. 기존 문법으로 에서 하나를 만들려면 아래와 같이 써야한다. (길다) React.createElement('div', null, 'Hello World'..

2022.11.11

React 설치와 개발환경 셋팅

1. 개발환경 셋팅 1-1. node JS (LTS 버전)을 다운받아 설치한다. https://nodejs.org/ko/ 1-2. VS code Editor를 다운받아 설치한다. https://code.visualstudio.com/ 2. React 프로젝트 생성 2-1. 작업용 폴더 생성 후 우클릭 하여 PowerShell창 열기 (해당 경로가 설정 된 터미널이 뜹니다.) 2-2. 작업용 폴더가 경로로 설정 된 터미널에서 리액트 프로젝트를 생성한다. (엔터) PS C:/만든폴더 경로/ npx create-react-app 프로젝트명 npx create-react-app blog 2-2. 에러가 뜰 경우 PowerShell을 관리자 권한으로 실행 해 시도해본다. PS C:\\WIndows\\system3..

2022.11.11

디자인패턴 : MVC

디자인패턴 중 하나인 MVC 패턴 MVC패턴은 디자인패턴 중 하나입니다. 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말합니다. 어떠한 앱을 만든다고 한다면, 그 앱을 유지보수 하고 또 다른 이들과 공유를 하면서 만들어야 할 때 좀 더 쉽고 깔끔하게 만들 수 있는 방법을 우리는 고안해야 합니다. 만약 이런 방법들을 명확히 하지 않는 다면.. 우리는 클래스 함수들을 일일히 다 만들어야 하게 될 겁니다. 라이브러리나 프레임워크가 그에 따른 예입니다. 예를 들어 그냥 jQuery를 이용한다면 $("#lucid")로 DOM을 선택할 수 있는 것을 순수 ..

2022.10.14

async await promise

function sayHi(){ console.log("start"); } async function a(){ let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(sayHi()), 3000) }); let result = await promise; console.log("end"); } a(); a함수를 실행하면 3초 뒤 sayHi가 실행 되고, 그 아랫줄이 순차적으로 실행된다. console창에 start가 먼저 찍히고, end가 나중에 찍힘

2022.09.30